在 playwright 中,页面加载完成有多种判断方式,下面给出几种实现方式:
1. 监听 `load` 事件,等待全部资源加载完成。
```javascript
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await Promise.all([
page.goto('http://example.com'),
page.waitForLoadState('load')
]);
console.log('Page loaded!');
await browser.close();
})();
```
2. 监听 `domcontentloaded` 事件,等待 DOM 渲染完成。
```javascript
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await Promise.all([
page.goto('http://example.com'),
page.waitForLoadState('domcontentloaded')
]);
console.log('DOM rendered!');
await browser.close();
})();
```
3. 使用 `waitForSelector` 等待指定元素出现。
```javascript
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('http://example.com');
await page.waitForSelector('body'); // 等待 body 出现
console.log('Selector found!');
await browser.close();
})();
```
需要注意的是,在使用 `waitForSelector` 等方式等待页面加载时,需要确保该元素在页面上是唯一的,否则可能会导致等待时间过长或出现错误。