从Selenium转Puppeteer：如何检查元素过期与特定属性变化？

Hey there! I see you're making the switch from Selenium to Puppeteer for UI testing—great choice! Let's walk through how to replicate those two key checks you had in Selenium, and fix up your current Puppeteer code to work reliably.

1. Checking if an Element is Stale (Removed from the DOM) #

In Selenium, you used until.stalenessOf() to wait for an element to be removed from the DOM. In Puppeteer, you have a couple of straightforward ways to do this:

Option 1: Use page.waitForSelector with hidden: true #

This is the simplest approach if you're targeting an element by selector:

// Wait up to 60 seconds for the modal to be removed from the DOM
await page.waitForSelector('.some-modal-element', { hidden: true, timeout: 60000 });

The hidden: true flag tells Puppeteer to wait until the element is either removed from the DOM or is no longer visible (this works well for most staleness check scenarios).

Option 2: Use page.waitForFunction for explicit DOM removal check #

If you need absolute certainty the element is gone from the DOM (not just hidden), use a custom check:

// Wait until the element no longer exists in the DOM
await page.waitForFunction(selector => !document.querySelector(selector), {}, '.some-modal-element', { timeout: 60000 });

This directly verifies the selector returns null, confirming the element has been fully removed.

2. Waiting for Element Property/CSS Changes #

Your Selenium code used driver.wait() to wait for opacity to become 1, but your initial Puppeteer attempt only checks the value once—this is why it might not work reliably. Puppeteer's waitForFunction is built for exactly this scenario: it waits until a condition is true before proceeding.

Example 1: Waiting for opacity to become 1 #

// First, wait for the button to exist (in case it's loaded dynamically)
await page.waitForSelector('.myButton');

// Wait up to 30 seconds for the button's computed opacity to be 1
await page.waitForFunction(selector => {
  const element = document.querySelector(selector);
  return window.getComputedStyle(element).opacity === '1';
}, {}, '.myButton', { timeout: 30000 });

// Now we can safely click it
await page.click('.myButton');

We use window.getComputedStyle() instead of element.style.opacity to match Selenium's getCssValue() behavior—it grabs the actual applied opacity (including styles from CSS classes, not just inline styles).

Example 2: Waiting for an element to change disabled state #

If you need to wait for an element's enabled/disabled status to shift, here's how:

// Wait for the button to become enabled (disabled = false)
await page.waitForFunction(selector => {
  const element = document.querySelector(selector);
  return !element.disabled;
}, {}, '.submit-button', { timeout: 30000 });

// Or wait for it to become disabled:
await page.waitForFunction(selector => {
  const element = document.querySelector(selector);
  return element.disabled;
}, {}, '.submit-button', { timeout: 30000 });

Fixing Your Original Puppeteer Code #

The core issue with your initial code is that it only checks the opacity once, right after waiting for the selector. If the opacity is still 0 at that moment, the check fails silently, and you'll click the button before it's ready. Replacing the one-time evaluate() with waitForFunction ensures Puppeteer waits until the condition is met before moving forward.

内容的提问来源于stack exchange，提问作者HaagenDaaS