Selenium - How to send input from div > input by id?

Question

So I am having an issue where I am trying to input a text to a input field but I realized that there is two same id by the same id name and I am here looking for help on how to specifiy which div -> input I would like to use.

What I did so far was:

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());
});

with using this HTML

So I am not sure what I am actually doing wrong in this case because right now it doesn't input anything and fails due to time out. I would like to wish to input any text to this specific element.

EDIT!

It looked like I had to switch to iframe due to there is a iframe loaded on the background which was the reason I wasn't able to actually write on the field. I had to use

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

to be able to write inside the fields.

Could You copy code into working example? Pictures are not really useful as code example. It could be part of code, it does not matter much. Just copy problematic element into js snippet or code sample. — SkorpEN, Jan 24 '20 at 08:53
@SkorpEN What do you mean? I do have a snippet of code or do you mean something else? — Thrillofit86, Jan 24 '20 at 08:57
U post html as png. There is icon [<>] with code snippet. There you could paste html and your js code. You do not have to provide whole page, You could short it to problematic part. Still it is faster to check when we got part of code that is problematic to You. — SkorpEN, Jan 24 '20 at 09:00
Im not sure if I am correct @SkorpEN but I do have put a code snippet above the image. right above it? — Thrillofit86, Jan 24 '20 at 09:02
I am interested in HTML code, note your code. I could try to make it work when I got html. Your code will be helpful in the end. — SkorpEN, Jan 24 '20 at 09:03
Ahhhh Okey okey! I will fix that right away. One moment! @SkorpEN — Thrillofit86, Jan 24 '20 at 09:04
@SkorpEN I think I found the issue. It was due to iFrame. Apprently I need to switch to iframe to be able to write inside it using `browser.switchTo().frame(element(by.xpath("//iframe[@id='wirecard-integrated-payment-page-frame']")).getWebElement()))` — Thrillofit86, Jan 24 '20 at 09:10

score 1 · Accepted Answer · answered Jan 24 '20 at 08:25

1

The IDs of your elements are not the same, <div> has pp-cc-first-name-field value, and <input> pp-cc-first-name-field value. Try to fix it as follows:

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());
});

answered Jan 24 '20 at 08:25

Evgeniy Chiruk

358
1
10

It seems like it still not entering anything neither even though I do understand that it is correct as you did. Could it be an issue if its a loaded iframe? Basically I have a button that I click before the fields is loading up after 3-6 seconds? – Thrillofit86 Jan 24 '20 at 08:35
If it were an iframe, then the test would fail with an exception NoSuchElementException. If this is a public site, I could see if it is possible. – Evgeniy Chiruk Jan 24 '20 at 08:39
Unfortunately it is not since its a project that I am working on and I am not able to put it out due to security stuff and so on. but indeed. What happens is that I do have a timeout etc if the element is not found by 1 minute then throw a timeout. Maybe there is a function to see if it actually found the element but is not able to send the keys? - If you have any more question about the site I could absolutely tell you more if needed :) – Thrillofit86 Jan 24 '20 at 08:42
1

Try this: `EC.presenceOf(element(by.id('pp-cc-first-name')))` instead `EC.visibilityOf(element(by.id('pp-cc-first-name'))` – Evgeniy Chiruk Jan 24 '20 at 08:49
Alright I just tested that and yet it still doesn't seem to do anything. Doesn't write anything and just throwing time out error – Thrillofit86 Jan 24 '20 at 08:54
.then(() => browser.wait(EC.presenceOf(element(by.id('pp-cc-first-name'))))) – Thrillofit86 Jan 24 '20 at 08:55
.then(() => element(by.id('pp-cc-first-name').sendKeys("hello world"))) – Thrillofit86 Jan 24 '20 at 08:56
means the element is not on the page, you can check it in the browser in devtools, whether it is on this id – Evgeniy Chiruk Jan 24 '20 at 08:59
Hmm but like when I do check through devtools I do see the ID beacuse it is the same HTML DOM that I do get from the selenium (When testing) so it should actually see the tag but it doesn't want to send any keys, Are you sure it doesnt need to be maybe selected to the iframe before or something like that? – Thrillofit86 Jan 24 '20 at 09:01
Does your html have an iframe tag? – Evgeniy Chiruk Jan 24 '20 at 09:03
Yupp it was that! I used `browser.switchTo().frame(element(by.xpath("//iframe[@id='wirecard-integrated-payment-page-frame']")).getWebElement()))` and it seems to now actually write in the iframe – Thrillofit86 Jan 24 '20 at 09:05
Did this help you? – Evgeniy Chiruk Jan 24 '20 at 09:08
Kinda offfff but it gave me inspiration so I will take it as a answer! – Thrillofit86 Jan 24 '20 at 13:46

score 1 · Answer 2 · answered Jan 24 '20 at 09:02

To input a character sequence within the input field you can use either of the following 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']

Effectively, your modified code block will be:

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());
});

Selenium - How to send input from div > input by id?

2 Answers2