playwright

Can't locate item in Playwright

I have the following element in the code

<sp-textfield id="library-name-textfield" data-testid="library-name-textfield" quiet="" placeholder="Name" dir="ltr" type="text" focusable="">
     #shadow-root
       <input class="input" type="text" aria-describedby="sp-help-text" aria-label="Yourname" placeholder="Your name">
</sp-textfield>

I try to do the following:

await this.inputBrandLibNameTxtBox().waitFor({ state: "visible", timeout: 20000 });
await this.inputBrandLibNameTxtBox().fill(brandName);

where:

    inputBrandLibNameTxtBox = () => this.page.getByTestId("library-name-textfield").locator("input");

I get the error:

TimeoutError: locator.fill: Timeout 20000ms exceeded.
Call log:
  - waiting for getByTestId('library-name-textfield').locator('input')
  -   locator resolved to <input type="text" class="input" aria-label="Your brand name" placeholder="Your brand name" aria-describedby="sp-help-text-2f4953d1"/>
  -   fill("new-brand--1733244070919")
  - attempting fill action
  -   waiting for element to be visible, enabled and editable

How can I fix this?

Solution

  • I would try to debug that with good old console.log and print out if that element is returning true to isVisible() function

    Other than that you can always waitFor some state changes like await this.element.waitFor( {state: "visible"} ) Additionally you can add a bigger timeout