Rayrun
← Back to Discord Forum

Can't fill

async function getRandomID() {
      const inputElement = await page.$("//input[@placeholder='ex: John']");
      const id = await inputElement.getAttribute('id');
      const idFinal: string = id.replace("FirstName", "");
      console.log("idFinal: ", idFinal);
      return idFinal;
    }

    async function remplirChamp(page: Page, HTMLid: string, selecteurName: string, valeur: string) {
      const fieldName: string = HTMLid+selecteurName;
      const inputField = await page.$(`#${fieldName}`);
      if (inputField) {
        await inputField.fill(valeur);
      }
    }

    await remplirChamp(page, HTMLid, "FirstName", rdmPrenom);
    await remplirChamp(page, HTMLid, "Name", rdmNom);
    await remplirChamp(page, HTMLid, "Nationality", rdmNationalite);
    await remplirChamp(page, HTMLid, "Country", rdmCountry);
    await remplirChamp(page, HTMLid, "Birthdate", rdmBirthdate);
    await remplirChamp(page, HTMLid, "Passport", rdmPasseport);
    await remplirChamp(page, HTMLid, "PassportExpiracy", rdmPasseportExpDate);
    await remplirChamp(page, HTMLid, "Email", rdmEmail);
    await page.locator("#Email").fill(rdmEmail);
    await remplirChamp(page, HTMLid, "CCRefundNumber", rdmCard);

I'm working on some tests for a website in my firm, basically, I scrap the id (that is generated randomly), and I fill the inputs, but here is the problem : the first name is not filled and it happens randomly with any input so my test is flaky

image.png
image.png

This thread is trying to answer question "Why is the test failing to fill in the first name field randomly and how can it be fixed?"

31 replies

What my function is doing: CSS ID: ctl37_ctl00_ctl00_ctl21_

await remplirChamp(page, HTMLid, "FirstName", rdmPrenom);```
``ctl37_ctl00_ctl00_ctl21_FirstName``
Here is the trace
image.png

Use locator instead of $, it is probably not waiting for it to appear and your if (false) will not fill

Would think you call for getting the e-mail via ID would assume that is pretty straight forward, should be working first question would be is there a shadow dom and is it open or closed...

Oh, nvm me. It appears to attempt a fill in your log

Still, $ is deprecated 😉

another thing i like to do in my debugging is make sure i'm getting the element and will use highlight..

Ya @hubspace has a great point, and would say go real simply, even use the codegen recorder to see what it gets. then get fancy with a generic routine... Walk first then fly...

ah looking closer your log shows you doing elementHandles.... They've been depreciated for a long long time and would avoid at all cost.. i.e. locators were introduced back in 1.14 if i remember correctly.

codegen give me the id but it changes so I can't use it

idk why i'm on 1.34.3

image.png

great reason to start using data-test-id or find another determinist approach for your locators...

@inf can you use filter or getbyrole locator

@dand33: Yeah I guess im gonna ask to add a data-test-id, It'll be less headache, but I must admit I'd have liked to complete this test without an internal helper

Yeah I guess im gonna ask to add a data-test-id, It'll be less headache, but I must admit I'd have liked to complete this test without an internal helper

@kalkleiste: Yeah, wydm?

Yeah, wydm?

tphillips8117

Use locators instead of evaluating on the page: https://playwright.dev/docs/locators

@inf like @tphillips8117 mentioned. Don't use page.$ PlayWright introduced locators. You should use e.g. page.locator('#<id-value>) or page.getByPlaceholder('ex: John ')

K basically, edited my code and asked to the dev team to put a data-test-id

But I guess my playwright is cursed

you can clearly see the boxes that have been filled, but as soon as I switch to the selectOption locator, it empties everything, I don't know why.

here is after (u can see that all the boxes are empty) idk why

image.png
testcodeautomate
testcodeautomate
@inf: You can try using pressSequentially method to fill the value. And use locator or GetBy methods to find element. For more info you can go through My this video. https://youtu.be/FJuMMWq_Vug Please let me know if it does not work.

You can try using pressSequentially method to fill the value. And use locator or GetBy methods to find element.

For more info you can go through My this video. https://youtu.be/FJuMMWq_Vug

Please let me know if it does not work.

I'll test today thanks g Elements are all finded and filled, but this doesnt work u can see on the screens, it remove some fills idk why

testcodeautomate
testcodeautomate

Is this application accessible publically?

testcodeautomate
testcodeautomate

I can give it a try at my end

it's a quite internal website in my company

I've always had trouble with type/fill but never necessarily blocked, except here and there: <#1142095028139864174>

testcodeautomate
testcodeautomate

Oh Okay..

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.