自动化浏览器的测试框架playwright 支持多种浏览器Chromium、Firefox 和 WebKit

Playwright 是一个用于自动化浏览器的测试框架,支持多种浏览器,包括 Chromium、Firefox 和 WebKit。在使用 Playwright 进行测试时,可能需要安装特定的浏览器,例如 Chrome。

如何安装Playwright Chrome

在使用 Playwright 时,可以通过以下步骤来安装 Chromium(Chrome 的开源版本):

  • 1 安装 Playwright

首先,如果你还没有安装 Playwright,可以通过 npm 或 pip 在 Node.js 或 Python 环境中安装它。

  • 对于 Node.js:

    npm install playwright

  • 对于 Python:

    pip install playwright

  • 2 安装浏览器

一旦 Playwright 安装完成,你可以使用以下命令安装 Chromium(Chrome 的一个分支)以及其他支持的浏览器(如果需要)。

复制代码
npx playwright install

或者,如果你只想安装特定浏览器(比如 Chromium),可以执行:

复制代码
npx playwright install chromium

运行测试

安装完成后,你可以开始编写和运行 Playwright 测试。以下是一个使用 Chromium 的简单示例:

复制代码
const { chromium } = require('playwright');

(async () => {
  // 启动浏览器
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  // 访问网站
  await page.goto('https://example.com');
  
  // 截图
  await page.screenshot({ path: 'example.png' });

  // 关闭浏览器
  await browser.close();
})();

将代码保存到example.js文件中,然后执行

node example.js

按照代码,在当前目录生成了一副图片

2025/03/27 13:45 17,117 example.png

调试通过

其他信息

  • 其他浏览器:除了 Chromium,Playwright 还支持 Firefox 和 WebKit(Safari 的引擎),可以通过相似的方式安装。

  • Headless 模式 :Playwright 可以在无头模式下运行,即不显示浏览器界面的情况下执行测试。你可以使用 headless: true 属性来启用这个特性。

    const browser = await chromium.launch({ headless: true });
    Copy

总结

playwright install chrome 是用于安装 Chrome(具体来说是 Chromium)浏览器的过程的一部分。通过 Playwright,你可以方便地进行跨浏览器的自动化测试,支持多种常见的浏览器以及无头模式,极大地提高了测试的灵活性和效率。

调试

playwright test测试的时候显示没playwright

感觉需要这样执行

npx playwright test

复制代码
npx playwright install
╔═══════════════════════════════════════════════════════════════════════════════╗
║ WARNING: It looks like you are running 'npx playwright install' without first ║
║ installing your project's dependencies.                                       ║
║                                                                               ║
║ To avoid unexpected behavior, please install your dependencies first, and     ║
║ then run Playwright's install command:                                        ║
║                                                                               ║
║     npm install                                                               ║
║     npx playwright install                                                    ║
║                                                                               ║
║ If your project does not yet depend on Playwright, first install the          ║
║ applicable npm package (most commonly @playwright/test), and                  ║
║ then run Playwright's install command to download the browsers:               ║
║                                                                               ║
║     npm install @playwright/test                                              ║
║     npx playwright install                                                    ║
║                                                                               ║

npx playwright test的时候显示没有test

这样安装

复制代码
npm install @playwright/test

然后

复制代码
(py311) E:\work\playwright>npx playwright test
Error: No tests found

不管怎么说,在经过这几步操作后,有playwright这个命令了

复制代码
playwright
Usage: playwright [options] [command]

Options:
  -V, --version                          output the version number
  -h, --help                             display help for command

Commands:
  open [options] [url]                   open page in browser specified via -b, --browser
  codegen [options] [url]                open page and generate code for user actions
  install [options] [browser...]         ensure browsers necessary for this version of Playwright are installed
  uninstall [options]                    Removes browsers used by this installation of Playwright from the system
                                         (chromium, firefox, webkit, ffmpeg). This does not include branded channels.
  install-deps [options] [browser...]    install dependencies necessary to run browsers (will ask for sudo permissions)
  cr [options] [url]                     open page in Chromium
  ff [options] [url]                     open page in Firefox
  wk [options] [url]                     open page in WebKit
  screenshot [options] <url> <filename>  capture a page screenshot
  pdf [options] <url> <filename>         save page as pdf
  run-server [options]
  show-trace [options] [trace...]        show trace viewer
  help [command]                         display help for command

这时候再执行测试:

复制代码
node example.js

哈哈,生成了一副图片呢:

2025/03/27 13:45 17,117 example.png

相关推荐
Version4 分钟前
深入理解JavaScript 中的 this
前端
李鸿耀15 分钟前
前端包管理工具:npm/Yarn/pnpm 特性解析与实战指南
前端
Enti7c23 分钟前
页面重构过程中如何保证良好的跨浏览器一致性?
前端·其他
海狸鼠30 分钟前
几行代码实现MCP服务端/客户端(接入DeepSeek)
前端·后端
木木黄木木35 分钟前
基于HTML5的拖拽排序功能实现详解
前端·html·html5
Stupid39 分钟前
[学习笔记] 工程化的浅入了解
前端
阿航hang40 分钟前
Reactivity 模块
前端
PineSongCN42 分钟前
nginx 反向代理后SSE连接无效的问题
前端
还是鼠鼠42 分钟前
Node.js 路由 - 初识 Express 中的路由
前端·vscode·前端框架·npm·node.js·express
Moment1 小时前
岗位急招,算法实习、音乐生成、全栈、flutter 都有,早十晚六 😍😍😍
前端·后端·面试