在 puppeteer 中检查特定属性/检查元素的陈旧性？答案

【问题标题】：Check for specific attribute/check for staleness of an element in puppeteer?在 puppeteer 中检查特定属性/检查元素的陈旧性？
【发布时间】：2018-11-04 01:19:46
【问题描述】：

嗨，我对此有点陌生，但我正在从 Selenium 和 Node.js 转移到 Puppeteer 进行 UI 测试，我想知道在 Puppeteer 中检查的最佳方法是什么？元素已过时（从 DOM 中删除），也是检查元素特定属性更改的最佳方法（例如，元素的不透明度是否从 0 更改为 1 或元素已禁用）

以下是我过去如何在 Selenium 中实现这两者的一些示例：

检查属性变化 -

function waitForOpacity(driver, obj, time) {
  driver.wait(() => {
    return obj.getCssValue('opacity').then(opacity => opacity === '1')
  }, time)
} 

waitForOpacity(driver, submitButton, 30000)
submitButton.click()

检查元素的陈旧性 -

function stalenessOf(driver, until, obj, time) {
 return driver.wait(until.stalenessOf(obj), time)
}

stalenessOf(driver, until, someModalElement, 60000)

我在 Puppeteer 中尝试过类似的东西 -

await page.waitForSelector('.myButton');
  await page.evaluate(() => {
    document.querySelector('.myButton').style.opacity === '1';
  }); 
  await page.click('.myButton');

但是我不认为这是正确的语法...感谢任何帮助，非常感谢！

【问题讨论】：

请参阅：How do I do X? SO 的期望是，提出问题的用户不仅会进行研究以回答他们自己的问题，还会分享研究、代码尝试和结果。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask

标签： javascript node.js selenium ui-testing puppeteer

【解决方案1】：

我想我经过一些研究后想通了，但不确定它是否是最干净的解决方案 -

检查不透明度变化 -

await page.waitForSelector('.myBtn');
  await page.waitFor(
    () => document.querySelector('.myBtn').style.opacity === '1'
  );
  await page.click('.myBtn');

检查元素的陈旧性 -

await page.waitFor(
    () => !document.querySelector('.someModalElement')
  );

【讨论】：