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。

bash 复制代码
npm init -y
npm init playwright@latest

编写第一个测试脚本

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

javascript 复制代码
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();
});

运行测试脚本

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

bash 复制代码
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 进行基本的网页自动化测试的一个简单示例。通过修改页面地址和断言条件,你可以针对不同的网站和功能编写更复杂的测试用例。

案例:打开百度并搜索

java 复制代码
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();
})();
相关推荐
南通DXZ44 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
前端太佬2 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia2 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
你的人类朋友2 小时前
CommonJS模块化规范
javascript·后端·node.js
Mintopia1 天前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
咖啡教室1 天前
nodejs开发后端服务详细学习笔记
后端·node.js
不爱吃鱼的猫-1 天前
Node.js 安装与配置全攻略:从入门到高效开发
服务器·node.js
你的人类朋友1 天前
JS严格模式,启动!
javascript·后端·node.js
前端啊龙1 天前
为什么需要 Node.js 的 URL 处理工具?
node.js