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();
})();
相关推荐
小小书童安东尼20 分钟前
node实现自动生成vue页面,更新router
node.js
斯~内克6 小时前
FreeMarker语法深度解析与Node.js集成实践指南
node.js
薛定谔的猫-菜鸟程序员7 小时前
用Node.js施展文档比对魔法:轻松实现Word文档差异比较小工具,实现Word差异高亮标注(附完整实战代码)
node.js·word·diff算法·word文档差异比较工具
代码小学僧7 小时前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
小妖6669 小时前
用 Nodemon 解决 npm run serve 频繁重启服务
前端·npm·node.js
欧先生^_^20 小时前
Node.js 简介
node.js
斯~内克1 天前
深入解析Node.js洋葱模型:原理、优势与实战陷阱
node.js
2301_799404911 天前
如何修改npm的全局安装路径?
前端·npm·node.js
(❁´◡双辞`❁)*✲゚*1 天前
node入门和npm
前端·npm·node.js
Herbig1 天前
服务器上安装node
linux·node.js