example源码解读
我们来看看刚才执行的那个example.spec.ts测试案例源码文件：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { test, expect } from ‘@playwright/test’; test(‘has title’, async ({ page }) => { await page.goto(‘https://playwright.dev/’); // Expect a title “to contain” a substring. await expect(page).toHaveTitle(/Playwright/); }); test(‘get started link’, async ({ page }) => { await page.goto(‘https://playwright.dev/’); // Click the get started link. await page.getByRole(‘link’, { name: ‘Get started’ }).click(); // Expects the URL to contain intro. await expect(page).toHaveURL(/.*intro/); }); |
这里我们看到了两个test方法，test有两个参数，第一个参数是测试案例的名称，我们看到了”has title”和”get started link”，这就是我们之前在报告中看到的两个测试案例的名称。第二个参数是一个函数，这里用一个lambda表达式来表示：
| 1 2 3 | async (参数) => { 函数身体部分 } |
async关键字表示这个函数是一个异步函数。函数的参数，在代码中写的是{ page }，这表示一个对象，这个对象中有一个元素是page，类型是@playwright/test包中的Page。这个函数的原型，是这样的：
| 1 | function testFunction(args: PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions, testInfo: TestInfo) void | Promise<…> |
看起来很复杂吗？其实看清楚就明白了，这个函数有两个参数，一个叫args类型是PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions，第二个参数叫testInfo，类型是TestInfo，返回类型是void或Promise。
而page是PlaywrightTestArgs类中的一个成员。
在函数体中，page.goto方法很明显是页面跳转到一个指定的网页地址，前面的await必须要加，因为page.goto方法是一个异步方法，如果不加await那么在页面还没发生跳转就会执行后面的语句了。
expect(page).toHaveTitle(/Playwright/)很明显是一句断言语句，可以解读为“期望xx对象有什么”，那么这里明显是期望当前的页面有”Playwright”这个title，注意这里/Playwright/这种正斜杠的写法，是JavaScript中正则表达式的语法，只要匹配有Playwright字符串就判定为true了。前面的await是和前一句同样的意思，等待异步完成。
第二个测试案例，和第一个基本类似，仅仅多了一句
| 1 | await page.getByRole(‘link’, { name: ‘Get started’ }).click(); |
这一句是操作页面的一个元素进行点击操作。page.getByRole方法是一个页面元素的定位方法，返回一个页面元素，然后执行点击。
再整体看一遍example.spec.ts文件，是不是感觉很简单而且可读性很高呢？这就是PlayWright的魅力了。
命令行说明
在node项目中，我们一般使用npx来执行可执行包。在我们这个项目中，有一个node_modules目录，里面存放了项目所有下载的依赖包。其中有一个.bin目录，里面就是一些可执行的二进制包。这里是playwright可执行文件。而npx其实就是去执行这个文件。
我们在前面用过一个命令来执行测试：
| 1 | npx playwright test |
其实也可以直接去执行.bin目录下的playwright可执行文件：
| 1 | ./node_modules/.bin/playwright test |
现在看看有哪些常用的执行测试的方法：
- 执行所有测试1
npx playwright test - 执行指定的测试案例文件1
npx playwright test landing-page.spec.ts - 执行一组测试案例（
tests/todo-page/和tests/landing-page/两个目录下的所有案例）1
npx playwright test tests/todo-page/ tests/landing-page/ - 执行测试案例文件名包含landing或者login的案例文件1
npx playwright test landing login - 执行测试案例的名称为”add a todo item”的1
npx playwright test -g “add a todo item”-g参数其实是一个过滤参数 - 在“有头”模式下执行测试（就是会看到浏览器被打开，而默认的无头模式则不会看到有浏览器打开）1
npx playwright test landing-page.spec.ts –headed - 指定浏览器执行测试1
npx playwright test landing-page.ts –project=chromium - 调试测试案例:1
npx playwright test –debug
这时候playwright会打开一个浏览器，开始单步执行测试案例。 - 调试指定的测试案例脚本文件:1
npx playwright test example.spec.ts –debug - 调试测试脚本文件指定行号的测试案例:1
npx playwright test example.spec.ts:10 –debug
如图：
- 显示测试报告1
npx playwright show-report
录制功能
在命令行输入codegen就可以启动playwright的录制功能：
| 1 | npx playwright codegen https://blog.testops.vip/ |
录制下的代码，可以复制黏贴到你的文件中。不过录制功能感觉略为简易，鼠标的一些特殊操作没法记录，比如悬停之类的，基本操作是没问题的。所以录制功能仅作为一个参考吧，不用太依赖。
声明：文中观点不代表本站立场。本文传送门：https://eyangzhen.com/187064.html
