'waiting on selector input on playwright

So Im having a problem with playwright. Im trying to fill an input field with a certain placeholder.

using:

await page.waitForSelector('input[placeholder="Text"]', {
        state: "visible",
    });
await page.fill('input[placeholder="Text"]', "Blabla");

And im timing out because its not visible.

The input field im trying to fill is rendered only when a user click on a certain button on the screen that toggles the input field.

For example:

option 1
option 2

when the user clicks on option 2 an input field becomes visible to collect data from the user. so its not always visible on the screen.

When im always showing the input field, without the conditional rendering its not a problem, so im guessing the fact im rendering it only when a certain option is selected and its not always visible is my problem.

how can I solve this issue?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source