Playwright 快速入门：Playwright 是一个用于浏览器自动化测试的 Node.js 库

Playwright 是一个用于浏览器自动化测试的 Node.js 库，它支持 Chromium, Firefox 和 WebKit 浏览器引擎。Playwright 提供了一套强大的 API 来进行网页自动化测试，包括页面导航、元素选择、表单提交等操作，并且能够处理现代网页中的异步加载内容。
在这里插入图片描述

下面是一个简单的入门案例，展示如何使用 Playwright 进行基本的网页浏览和元素交互。这个例子将打开浏览器，访问一个网站，查找特定的文本并关闭浏览器。
官方文档：https://playwright.nodejs.cn/

安装 Playwright

首先，你需要安装 Playwright。如果你还没有安装 Node.js，请先安装 Node.js，然后在你的项目文件夹中初始化一个新的 Node.js 项目，并安装 Playwright。

npm init -y
npm init playwright@latest

编写第一个测试脚本

创建一个名为 test.js 的文件，并添加以下代码：

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  // 打开目标网站
  await page.goto('https://example.com');

  // 查找页面上的某个元素，并验证其文本内容
  await expect(page).toHaveTitle('Example Domain');
  const heading = await page.locator('h1');
  await expect(heading).toHaveText('Example Domain');

  // 截图保存
  await page.screenshot({ path: 'example.png' });

  // 关闭浏览器（可选）
  // await browser.close();
});

运行测试脚本

在命令行中运行测试脚本：

npx playwright test test.js

解释

test('basic test', async ({ page }) => { ... }): 定义了一个测试用例，其中 page 是一个浏览器页面对象，允许你与页面进行交互。
await page.goto('https://example.com'): 导航到指定的 URL。
await expect(page).toHaveTitle('Example Domain'): 断言页面标题是否为预期值。
const heading = await page.locator('h1'): 使用 CSS 选择器定位页面上的 <h1> 标签。
await expect(heading).toHaveText('Example Domain'): 检查找到的元素是否包含预期的文本。
await page.screenshot({ path: 'example.png' }): 对当前页面截图，并保存为 example.png 文件。

以上就是使用 Playwright 进行基本的网页自动化测试的一个简单示例。通过修改页面地址和断言条件，你可以针对不同的网站和功能编写更复杂的测试用例。

案例：打开百度并搜索

const { chromium } = require('playwright');

(async () => {
    // 启动带有用户数据目录的Chromium浏览器
    const browserContext = await chromium.launchPersistentContext('C:\\Users\\ZHENG\\AppData\\Local\\Google\\Chrome\\User Data', {
        headless: false, // 显示浏览器窗口
    });
    // 获取默认页面
    const page = browserContext.pages()[0];
    // 防止被检测到是自动化工具
    const js = "Object.defineProperties(navigator, {webdriver:{get:()=>undefined}});";
    await page.addInitScript(js);

    // 访问百度首页
    await page.goto('https://www.baidu.com');

    // 在搜索框中输入“智能手机” //*[@id="kw"]
    await page.fill('input[name="wd"]', '智能手机');

    // 提交表单
    await page.press('input[name="wd"]', 'Enter');

    // 等待搜索结果加载完成
    await page.waitForSelector('.c-container'); // 百度搜索结果中的一个通用选择器

    // 获取所有搜索结果的链接
    const searchResultLinks = await page.$$eval('content_left a', links => links.map(link => link.href));

    // 遍历每个链接，进入链接并获取指定XPath的数据
    for (let url of searchResultLinks) {
        try {
            // 进入每个搜索结果页面
            await page.goto(url);

            // 假设我们要抓取页面中所有段落的文字内容，XPath为 '//p'
            const paragraphTexts = await page.$$eval('//p', paragraphs => paragraphs.map(p => p.textContent.trim()));

            // 输出抓取的内容
            console.log(`从页面 ${url} 抓取到的内容：`, paragraphTexts.join('\n'));
        } catch (error) {
            console.error(`访问或抓取页面 ${url} 时出错：`, error.message);
        }
    }

    // 当所有操作完成后，关闭浏览器上下文
    await browserContext.close();
})();