Rayrun
BlogAsk AIToolsVideosQA WikiDiscord
← Back to Discord Forum

Can't fill

Web DevelopmentDOM ManipulationFlakinessHeadless TestingBrowsers
infposted in #help-playwright
Open in Discord
inf
inf
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
inf
inf

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
hubspace
hubspace

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

dand33

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...

hubspace
hubspace

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

hubspace
hubspace

Still, $ is deprecated 😉

dand33

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

dand33

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...

dand33

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.

inf
inf

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

inf
inf

idk why i'm on 1.34.3

image.png
dand33

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

kalkleiste

@inf can you use filter or getbyrole locator

inf
inf
@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

inf
inf
@kalkleiste: Yeah, wydm?

Yeah, wydm?

tphillips8117

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

kalkleiste

@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 ')

inf
inf

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

inf
inf

But I guess my playwright is cursed

inf
inf

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.

inf
inf

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.

inf
inf

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

inf
inf

it's a quite internal website in my company

inf
inf

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

testcodeautomate
testcodeautomate

Oh Okay..

Open in Discord

Related Discord Threads

BlogAsk AIToolsVideosQA WikiDiscord
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.