How can I send input to a specific input field within a div using Selenium?

Question

How can I send input to a specific input field within a div using Selenium?

Currently, I am facing an issue where I am attempting to enter text into an input field. However, I have noticed that there are two elements with the same id name and I need guidance on specifying which specific div -> input I want to interact with.

Here is what I have tried so far:

it('Entering First Name', function (done) {

    browser.driver
        .then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[@id="pp-cc-first-name-field"]'))), 50000, "Timed out finding 'First Name' element"))
        .then(() => element(by.xpath('//input[@id="pp-cc-first-name-field"]')).sendKeys("hello world")
        .then(() => done());
});

This is the HTML structure being used:

https://i.sstatic.net/7KYjH.png

At this point, I am unsure about the mistake I might be making as the input operation fails due to a timeout. My goal is to successfully input text into this particular element.

UPDATE!

After further investigation, it appears that I needed to switch to an iframe because there was an iframe loaded in the background preventing me from entering text into the field. I had to use

browser.switchTo().frame(element(by.xpath("//iframe[@id='cc-integrated-payment-page-frame']")).getWebElement()))

in order to successfully input text into the fields.

javascript selenium protractor mocha.js chai

Answer 1

Answer №1

Your elements have mismatching IDs- the <div> element has a value of pp-cc-first-name-field, while the <input> element also has a value of pp-cc-first-name-field. To resolve this issue, update your code as shown below:

it('Entering First Name', function (done) {

    browser.driver
        .then(() => browser.wait(EC.visibilityOf(element(by.id('pp-cc-first-name'))), 50000, "Timed out finding 'First Name' element"))
        .then(() => element(by.id('pp-cc-first-name')).sendKeys("hello world")
        .then(() => done());
});

Answer 2

Your elements have mismatching IDs- the <div> element has a value of pp-cc-first-name-field, while the <input> element also has a value of pp-cc-first-name-field. To resolve this issue, update your code as shown below:

it('Entering First Name', function (done) {

    browser.driver
        .then(() => browser.wait(EC.visibilityOf(element(by.id('pp-cc-first-name'))), 50000, "Timed out finding 'First Name' element"))
        .then(() => element(by.id('pp-cc-first-name')).sendKeys("hello world")
        .then(() => done());
});

Answer 3

Answer №2

If you want to enter a sequence of characters into the input field, there are two options for using Locator Strategies:

Using css_selector:

input#pp-cc-first-name[name='First name'][placeholder='First name']

Using xpath:

//input[@id='pp-cc-first-name' and @name='First name'][@placeholder='First name']

Your revised code block will look like this:

it('Entering First Name', function (done) {

    browser.driver
    .then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[@id="pp-cc-first-name" and @name="First name"][@placeholder="First name"]'))), 10, "Timed out finding 'First Name' element"))
    .then(() => element(by.xpath('//input[@id="pp-cc-first-name" and @name="First name"][@placeholder="First name"]')).sendKeys("hello world")
    .then(() => done());
});

Answer 4

If you want to enter a sequence of characters into the input field, there are two options for using Locator Strategies:

Using css_selector:

input#pp-cc-first-name[name='First name'][placeholder='First name']

Using xpath:

//input[@id='pp-cc-first-name' and @name='First name'][@placeholder='First name']

Your revised code block will look like this:

it('Entering First Name', function (done) {

    browser.driver
    .then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[@id="pp-cc-first-name" and @name="First name"][@placeholder="First name"]'))), 10, "Timed out finding 'First Name' element"))
    .then(() => element(by.xpath('//input[@id="pp-cc-first-name" and @name="First name"][@placeholder="First name"]')).sendKeys("hello world")
    .then(() => done());
});

How can I send input to a specific input field within a div using Selenium?

Answer №1

Answer №2

Similar questions

React child component does not refresh upon modification of an array property

The input field does not contain the chosen date

Safari browser is experiencing issues with the custom file upload script

Deleting files in a mongodb collection using node.js

The property was computed but cannot be set - specifically for a toggle component

Node and Express continuing to send requests in a loop even after the response has been completed

Verifying Angular (2+?) Compatibility: Opening and Closing Material mat-menu on Hover [GUIDE]

Transmitting multi-row form information through jQuery (ajax, json) in conjunction with Spring MVC

At all times, AJAX/PHP/JS will have a readyState of 1 and a Status of 0, with no text response

Swap out the setInterval function with a different algorithm embedded within the designated function

The setting `ensureCleanSession: true` doesn't appear to be effective when included in the capabilities for Internet Explorer 11

Having difficulty managing Chrome alerts using C# NUnit WebDriver

Automatically update button appearance upon reaching zero value using JavaScript

Connecting Angular and Socket.IO for Server-to-Server Communication

Transmitting form information to a nested page within a div container

Dynamic Text Challenge

Error in Selenium: httplib.BadStatusLine raised

What is the minimum number of lines that can be used for javascript code?

Uncover and control nested objects in JSON data

The casperjs evaluate function isn't able to provide me with the necessary data I