无法通过 Selenium 使用 ember 在 iframe 中定位元素

Question

我正在使用黄瓜做自动化（我第一次做自动化）。 UI 在 iF​​rame 中并使用 ember。 （UI代码来自其他团队，因此UI上的任何更改均不适用）

我正在尝试查找文本字段并填写该字段（最后一块）。但是，我一直找不到元素。任何人都可以帮助建议任何方法来找到它？

HTML 代码

  <div id="payeePassportNumber" class="form-row-line">
        <div id="ember866" class="rdc-component-base rdc-text-input rdc-text-input no-label label-top ember-view">  
            <div class="label-holder">
                <label>Passport Number</label><!---->
            </div>
            <div class="component-holder">
                <div class="component-wrapper textinput-wrapper">
                    <input type="text" placeholder="" maxlength="140" id="ember867" class="ember-text-field ember-view">
                </div>
            </div>
        </div>
    </div>

回答问题前的 Ruby 代码

session.within_frame(session.find(:xpath, "//[@id='myframe']")) do
    session.driver.browser.find_element(:id, 'payeeDetails').click
    if payeeDetails == 'Passport Number'
    session.find(:xpath,"//[text()[normalize-space()='#{payeeDetails}']]").click
    session.driver.browser.find_element(:id, 'payeePassportCountry').click
    session.find(:xpath,"//[text()[normalize-space()='#{country}']]").click
    session.fill_in session.find(:xpath, "//[@id='payeePassportNumber']/div/div[2]/div[contains(@Class, 'component-wrapper textinput-wrapper')]"), :with => "123456"

错误

 invalid selector: Unable to locate an element with the xpath expression //[@id='payeePassportNumber']///div/[contains(@Class, 'component-wrapper textinput-wrapper')] because of the following error:
    SyntaxError: Failed to execute 'evaluate' on 'Document': The string '//[@id='payeePassportNumber']///div/[contains(@Class, 'component-wrapper textinput-wrapper')]' is not a valid XPath expression.
    (Selenium::WebDriver::Error::InvalidSelectorError)

回答问题后的 Ruby 代码

session.within_frame('myframe') do
        #find proxy type dropdown list & select proxy type
        session.find('#payeeDetails').click
        session.find("li", text: "#{payeeDetails}").click       
            if payeeDetails == 'Passport Number'

                #find country dropdownlist & select country
                session.find('#payeePassportCountry').click
                session.find(:xpath,"//*[text()[normalize-space()='#
                {country}']]").click
                #fills in proxy ID
                session.find('#payeePassportNumber').fill_in with: proxyID
            end
end

Answer 1

你的错误告诉你出了什么问题：

"//[@id='payeePassportNumber']/div/div[2]/div[contains(@Class, 'component-wrapper textinput-wrapper')]"

不是一个有效的 XPath 表达式。

我怀疑@Class 被类名中的空格弄糊涂了。试试下面的 xpath：

"//div[@id='payeePassportNumber']/div/div[2]/div[contains(@class, 'component-wrapper') and  contains(@class, 'textinput-wrapper')]"

这有帮助吗？

Answer 2

您不能将@Class 与大写 C 一起使用，总体而言您的选择器是错误的。
尝试使用如下简单的选择器：

1. css 选择器：#payeePassportNumber input
2. xpath：//div[@id='payeePassportNumber']//input

Answer 3

您的代码有很多问题：

1. 你在不需要的地方调用 find。
2. 您正在调用直接驱动程序方法（无论何时使用 .driver.browser，您都可能做错了什么）。
3. 您将元素传递给不带元素的方法 (fill_in)，
4. 使用规范化空间执行复杂的 xpath 查询通常不是正确的方法。

如果没有看到您的代码所引用的所有 HTML（#payeeDetails，您尝试使用 normalize-space xpaths 来单击哪些元素等），很难对您的代码进行完整修复，但最简单的方法是填写HTML 中显示的输入字段（假设它位于 id 为“myframe”的 iframe 中）类似于

session.within_frame('myframe') do
  session.find('#payeePassportNumber').fill_in with: '123456'
end