Unable to locate an element within iframe using ember through Selenium

Question

I'm doing automation using cucumber (My first time doing automation). The UI is in iFrame & using ember. (UI code is from another team, therefore, any change on UI is not applicable)

I'm trying to find the text field & fill in the field (the last piece). However, I keep getting element not found. Anyone can help to suggest any method to find it ?

HTML Code

  <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 Code before question was anwsered

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"

Error

 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 Code after question was anwsered

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

Your error tells you what is wrong:

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

is not a valid XPath expression.

I suspect that @Class is confused by the space in the class name. Try the following xpath:

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

Does that help?

Answer 2

You can't use @Class with capital C, and overall your selector is wrong.
Try to use simple selectors like below:

1. css selector: #payeePassportNumber input
2. xpath: //div[@id='payeePassportNumber']//input

Answer 3

There's a number of things wrong with your code:

1. You're calling find where you don't need to.
2. You're calling direct driver methods (anytime you're using .driver.browser you're probably doing something wrong).
3. You're passing elements to methods that don't take elements (fill_in),
4. Doing complex xpath queries with normalize-space is generally never the right approach.

Without seeing all the HTML your code is referring to (#payeeDetails, which elements you're trying to click with your normalize-space xpaths, etc) it's hard to give full fixes for your code but the simplest way to fill in the input field shown in your HTML (assuming it's in an iframe with id of 'myframe') would be something like

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