等待剧作家的选择器输入

Question

所以我对剧作家有意见。 我正在尝试用某个占位符填充输入字段。

使用：

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

我超时了，因为它不可见。

仅当用户单击屏幕上切换输入字段的特定按钮时，才会呈现我尝试填充的输入字段。

例如：

option 1
option 2

当用户单击选项 2 时，输入字段将变为可见，以收集用户的数据。 所以它并不总是在屏幕上可见。

当我总是显示输入字段时，如果没有条件渲染，这不是问题，所以我猜测只有在选择某个选项并且它并不总是可见时才渲染它，这是我的问题。

我该如何解决这个问题？

Answer 1

我不确定它是最好的方法，但是当我需要检查某些东西是否可见时，我首先评估选择器，获取类，然后检查它是否具有可见时添加的关键字。 就我而言，我这样做了

  //i need to force the navbar to close when it stays open 
  let navbarClass: string = await page.$eval('[name="navbar"]', el => el.getAttribute('class'));
  if(navbarClass.includes('unfolded')) {      //unfolded was added when its open
    await page.locator('<the input selector>').click();
  }

page.$eval 可以获取选择器的许多不同属性，希望您的代码中有一些内容可以帮助确定其打开。

Answer 2

如果输入不可见，则无法填写。因此，您必须先使用 Playwright 单击按钮。
你可以使用类似的东西：

await page.getByText('option2').click()

。

那么您就不需要

page.waitForSelector

，因为 Playwright 会自动等待选择器。
我还鼓励您使用

getByPlaceholder

作为选择器，因为这通常更可靠。

所以，总共：

await page.getByText('option2').click();
await page.getByPlaceholder('placeholderText`).fill('Blabla');