标签：... playwright const await 文档测试自动化 test page

概述

官方网址：https://playwright.dev/

什么是 playwright？

playwright，端对端自动化测试，选择该技术栈用于端对端测试，有几大原因：

支持所有浏览器
快速可靠的运行
强大的自动化能力
限制性较小

支持所有浏览器

可适用于所有现代化浏览器，具有完整的 API。包括 Google Chrome 和 Microsoft Edge (基于 Chromium), Apple Safari (基于 WebKit) 和 Mozilla Firefox.
注：不支持传统的 Microsoft Edge 或者 IE11 (deprecation notice).
跨平台测试。适用于 window、linux、macOS 的 WebKit 构建。
注：在 macOs 中存在某些与 window 不一致的语法，具体请查询 API。
移动设备测试：可借助浏览器的移动设备模拟器进行移动端的测试。
注：暂仅对安卓室验性支持，如果需要模拟 ios，please upvote this issue.
带浏览器 UI 运行。支持所有平台及浏览器的 handless 和 handed

快速可靠运行

自动等待完成 API。可通过 Auto-waiting element 自动等待元素准备好，再做操作
自动化无超时，playwright 用于页面请求，网络请求等，对于设备睡眠状态，不会阻止 playwright 的自动化测试进程
playwright 支持多浏览器并行运行，隔离环境，单个浏览器具有独立状态。
具有多种元素选择器用于定位元素。

自动化

多域，多页面，多框架。playwright 不受项目中的 JavaScript 执行范围限制，可以使用多个页面实现多个场景自动化测试
网络控制。playwright 引入了网络拦截，模拟网络请求等。
覆盖场景。playwright 覆盖了文件上传，文件下载，iframe，本地输入事件等等场景。

限制性小

支持多种语言，更多请参阅 supported languages.
支持所有浏览器

创建项目

node 版本要使用 14 以上

进入目标项目文件，运行安装 playwright 命令

npm i @/playwright/test -D

初始化 playwright 项目

npm init playwright

安装浏览器二进制依赖

npx playwright install

playwright 目录结构

project（项目目录）
├── playwright（测试用例代码运行文件）
├── playwright.config.js（playwright 配置文件）
├── test-results（运行异常的结果，截图或者录屏存放地址）
├── tests-examples（运行测试用例---示例）

playwright 配置

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

const config = {
testDir: './e2e',//用例运行文件夹
timeout: 120 _ 1000,//用例运行总超时时间
expect: {
timeout: 5000 // 当个用例运行超时时间
},
use: {
actionTimeout: 0,
headless: false,
launchOptions: {
slowMo: 1000 // 操作步骤停留时间（毫秒）
},
/_ Base URL to use in actions like `await page.goto('/')`. \*/
// baseURL: 'http://localhost:3000',

    trace: 'on-first-retry',
    screenshot: 'only-on-failure',//截图，可配置
    video: 'on-first-retry',// 录屏，可配置

},

/_ Configure projects for major browsers _/
projects: [
{
name: 'chromium',//设备运行别名，用于报告输出的对应，多个设备，不要使用同名
use: {
...devices['Desktop Chrome'],//设备
viewport: { height: 1080, width: 1920 }//可配置运行项目的尺寸
}
}

    /* 模拟移动端设备配置 */
    // {
    //   name: 'Mobile Chrome',
    //   use: {
    //     ...devices['Pixel 5'],
    //   },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: {
    //     ...devices['iPhone 12'],
    //   },
    // },

    /* 其他浏览器 */
    // {
    //   name: 'Microsoft Edge',
    //   use: {
    //     channel: 'msedge',
    //   },
    // },

]
};

module.exports = config;

启动自动化测试

npx playwright test

常用命令

运行测试用例
testDir所有文件：npx playwright test
运行单个指定文件：npx playwright test testDir/file (文件夹下的指定文件名称)

自动生成代码
-o：将录制的脚本保存到一个文件
–target：规定生成脚本的语言，默认为 Playwright Test
-b：指定浏览器驱动

npx playwright codegen pathUrl -o test.spec.js --target=javascript

打开测试报告（要先运行测试用例命令才能查看）
npx playwright show-report

示例

// 自动化测试开始之前的动作
test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});

// 分组
test.describe('Editing', () => {
  test.beforeEach(async ({ page }) => {
      ...
  });
  test('should hide other controls when editing', async ({ page }) => {
      ...
  });
  test('should save edits on blur', async ({ page }) => {
      ...
  });
});


// @ts-check
const { test, chromium } = require('@playwright/test');

// { page }
test('app', async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  // @ts-ignore 浏览器内核
  const browsersType = page._browserContext._browser._name;
  // @ts-ignore 浏览器视图窗口
  const w = page._viewportSize.width;
  // @ts-ignore
  const h = page._viewportSize.height;
  // 快照存放路径
  const picPath = 'screenshots/cascade-code' + browsersType + '/' + w + '*' + h + '/';

  // 请求监听
  await page.route('**', async (route) => {
    await page.on('requestfailed', async (request) => {
        // 网络请求失败
      console.log(request.url() + '---err:-------' + request.failure()?.errorText);
      ...
    });
    await page.on('requestfinished', (res) => {
        // 网络请求成功
      // console.log('res---', res);
      ...
    });
    await page.on('response', (response) => {
        // 监听网络请求结果
      console.log('response---', response);
      ...
    });
    // 操作继续
    route.continue();
  });

  // 自动等待事件结果
  await page.waitForEvent('requestfinished');

  // 路由跳转
  await page.goto('http://localhost:8080/');
  ...

  //点击事件
  await page.getByText('业务管理').click();
  ...

  // 延迟下一步操作
  await page.waitForTimeout(3000);

  //等待页面跳转完成
  await page.waitForURL('http://localhost:8080/#/manage');
  ...

  // 文本输入
  await page.getByPlaceholder('请输入级联码').fill('uAtLZOtI');

  //自动等待元素准备好
  await page.waitForSelector('#subscribe-btn');

  // 文件下载
  await page.getByText('点击下载模板').click();
  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.getByText('点击下载模板').click()
  ]);
  console.log('download---', download);

  // 图片上传
  const [fileChooser1] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: '图标: plus 上传图片' }).click()
  ]);
  await fileChooser1.setFiles('src/assets/5.jpg');

  // 获取元素，等待元素可见
  const elementHandle = await page.$('text=级联目录');
  // 监听滚动
  await elementHandle.scrollIntoViewIfNeeded({ timeout: 50 });
  // 滚动到元素可见
  await elementHandle.isVisible();
  ...

  //截图，path可自定义，type：截图的图片格式
  await page.screenshot({
    path: picPath + 'view-tranle-modal-2.png',
    type: 'png'
  });
  ...

  //断言
  await expect(page).toHaveURL('http://localhost:8800/#/manage');

  await page.close();
  await browser.close();
}

问题

使用自动生成代码测试问题

使用自动生成的代码时，比如文件上传
await page.getByRole('button', { name: '图标: plus 上传文件' }).click();
await page.getByRole('button', { name: '图标: plus 上传文件' }).setInputFiles('1.png');

在运行过程中，自动生成的代码无法使用，不符合playwright的语法写法，需要手动修改
const [fileChooser1] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: '图标: plus 上传图片' }).click()
  ]);
  await fileChooser1.setFiles('src/assets/1.png');

标签：...,playwright,const,await,文档,测试,自动化,test,page
From： https://www.cnblogs.com/liangxia/p/17022469.html

端对端自动化测试文档

概述