等待剧作家的选择器输入答案

【问题标题】：waiting on selector input on playwright等待剧作家的选择器输入
【发布时间】：2022-06-30 06:20:24
【问题描述】：

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

使用：

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

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

只有当用户点击屏幕上的某个按钮来切换输入字段时，才会呈现我试图填充的输入字段。

例如：

option 1
option 2

当用户点击选项 2 时，一个输入字段变为可见以从用户那里收集数据。所以它并不总是在屏幕上可见。

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

我该如何解决这个问题？

【问题讨论】：

标签： css-selectors playwright

【解决方案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 可以获得选择器的许多不同属性，希望您的代码中有一些东西可以帮助确定它的打开方式。

【讨论】：