企业官网建设流程全解析

商城网站设计服务商,公司和个人均不能备案论坛类网站,网站发多少篇文章开始做外链,人力资源外包收费报价表playwright 介绍 Playwright 是一个端到端#xff08;E2E#xff09;测试框架#xff0c; 它可在所有现代浏览器中运行功能强大的测试和自动化。支持多种编程语言 API#xff0c; 包括 JavaScript 、 TypeScript, Python, .NET 和 Java。正因为它基于浏览器#xff0c;相…playwright 介绍Playwright 是一个端到端E2E测试框架 它可在所有现代浏览器中运行功能强大的测试和自动化。支持多种编程语言 API 包括 JavaScript 、 TypeScript, Python, .NET 和 Java。正因为它基于浏览器相当于模拟用户真实操作因此不光能够用来跑测试用例还可以用来写爬虫。Playwright Test for VSCode我们可以安装一个 vscode 插件 Playwright Test for VSCode来帮助我们运行、录制、调试测试用例。初始化项目如果项目中没有安装PlaywrightNPM 包或者重新开始一个新的测试项目需要可以在 vscode 命令面板中输入intsll Playwright。选择我们常用的浏览器不必担心选错后面可以在项目中更改。还可以选择 GitHub Action 这样就可以轻松在 Github 中持续集成。这里我选择 chromium这样可以只下载一个浏览器内核。点击OK后插件会帮我们自动初始化程序 下图是初始化的目录结构配置文件都在playwright.config.ts中。看下package.json只包含了一个包playwright/test运行测试所有的测试用例都要写在tests文件夹中默认有一个测试文件包含有 2 个测试用例代码在example.spec.ts中。第一个测试用例确保标题包含 Playwright第二个测试用例确保点击 “Get Started”后跳转到 intro 的链接。选择左侧的测试用例并且勾选Show browser我们便可以直观的看到 Playwright 运行测试的过程。以上例子默认是使用 chromium 来运行的并且 chromium 不包含任何 cookie 和缓存信息。在playwright.config.ts配置文件中 可以配置启用的浏览器为 chrome我们只需要增加一个参数channel让 Playwright 使用浏览器来运行。 也可以是其他浏览器参数可以为 chrome, chrome-beta, chrome-dev, chrome-canary, msedge, msedge-beta, msedge-devmsedge-canary.use: { channel:chrome,/* Base URL to use in actions like await page.goto(/). */// baseURL: http://127.0.0.1:3000,/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */trace: on-first-retry,},我们虽然改成了使用浏览器来运行但是启动的浏览器也是一个无痕模式不包含任何缓存信息。添加 cookie测试的系统往往需要登录而在运行每个测试用例之前运行都需要登录这肯定是繁琐的因此我们可以在运行测试用例之前手动拷贝 cookies注入到浏览器中。比如掘金的每日签到和抽奖我就可以使用 Playwright 来实现自动化首先建立一个测试文件import { test, expect, type Page } from playwright/test;test(登录, async ({page, context}) {await context.addCookies([{name: sessionid,value: xxx,path: /,domain: .juejin.cn,},{name: sessionid_ss,value: xxx,path: /,domain: .juejin.cn,},]);await page.goto(https://juejin.cn/);});打开 chrome 控制台复制 cookies 添加到代码中此时点击左侧运行的测试用例发现已经是登录状态。录制一个测试用例如果要手动去查找 dom 从零开始写一个测试用例肯定是繁琐的因此 Playwright VSCode 插件提供了录制功能。运行上一次测试用例后浏览器是未关闭的。此时我们点击 vscode 左侧的Record new按钮vscode 便会自动创建一个测试文件并且记录操作步骤。录制时浏览器又是一个全新的不保留任何状态那如果我们要测试的是登录后的功能岂不是又要登录 其实 playwright 可以保存登录状态。在上面测试用例后加一句 storageState。import { test, expect, type Page } from playwright/test;test(登录, async ({page, context}) {await context.addCookies([{name: sessionid,value: xxx,path: /,domain: .juejin.cn,},{name: sessionid_ss,value: xxx,path: /,domain: .juejin.cn,},]);await page.goto(https://juejin.cn/); await context.storageState({ path: state.json });});并且在playwright.config.ts中配置存储位置。此时我们录制操作就已经是登录状态了。时长00:55以下便是录制后的代码。import { test, expect } from playwright/test;test(test, async ({ page }) {await page.goto(https://juejin.cn/);await page.getByRole(button, { name: 去签到 }).click();await page.getByRole(button, { name: 立即签到 }).click();await page.getByRole(button, { name: 去抽奖 }).click();await page.getByText(免费抽奖次数1次).click();await page.getByRole(button, { name: 收下奖励 }).click();});录制完成后直接运行代码可能会报错我们需要调整一下因为有些文本是异步请求实现的有些事件是请求成功后绑定的在手动录制时因为已经响应完成因此没问题我们加上 2 句延迟。test(test, async ({ page }) {await page.goto(https://juejin.cn/); await page.waitForTimeout(1000);await page.getByRole(button, { name: /去签到|已签到/ }).click(); await page.waitForTimeout(1000);await page.getByRole(button, { name: /今日已签到|立即签到/ }).click();await page.getByRole(button, { name: 去抽奖 }).click();const lotteryElement await page.$(#turntable-item-0);const buttonText await lotteryElement?.textContent();if (buttonText 免费抽奖次数1次) {await lotteryElement?.click();await page.getByRole(button, { name: 收下奖励 }).click();} else {expect(page.locator(#turntable-item-0, { hasText: /单抽/ })).toBeDefined();}});便可以运行成功注意这里我使用了waitForTimeout这个 api 在官网中已经被标记了废弃(deprecate)实际测试场景中请使用改用网络事件、选择器变得可见等信号。await page.goto(https://juejin.cn/);await page.waitForResponse((res) res.url().includes(/user_api/v1/incentive_activity/award_after_login));await page.getByRole(button, { name: /去签到|已签到/ }).click();await page.waitForResponse((res) res.url().includes(/growth_api/v2/get_today_status));await page.getByRole(button, { name: /今日已签到|立即签到/ }).click();等待接口响应成功后再出发点击事件。还有一点就是自动录制的代码一般使用了语义化定位方法比如getByRole、getByText这些定位器往往不够准确改动代码会导致测试用例失效。因此我们可以使用locator定位器来替换。在 Playwright 中Locator 表示一种元素查找方式是 Playwright 提供的一组方法用于定位页面上的元素。Locator 支持 XPath 和 CSS 选择器await page.locator(#tsf div:nth-child(2) div.A8SBwf div.RNNXgb div div.a4bIc input).click();await page.locator(//*[idtsf]/div[2]/div[1]/div[1]/div/div[2]/input).click();在 vscode 中可以使用 Pick locator 快速活动当前的 dom 定位。测试用例及断言录制的测试代码只能确保业务能够跑通但不能证明程序的可靠与健壮。一旦测试用例出错也不知道是程序错误还是测试用例错误因此我们还是需要根据测试用例来写可靠的测试代码。比如上述掘金抽奖程序可以包含以下测试用例签到的状态需要根据接口返回显示通过 network 查看签到返回如下因此我的签到测试用例代码如下test(签到的状态根据接口返回显示, async ({ page }) {await page.goto(https://juejin.cn/user/center/signin);const promise await page.waitForResponse((res) res.url().includes(/growth_api/v2/get_today_status));const res await promise.json();if (res.data.check_in_done) {await expect(page.locator(.signedin)).toHaveText(今日已签到);} else {await expect(page.locator(.signedin)).toHaveText(立即签到);await page.getByRole(button, { name: /立即签到/ }).click();await page.getByRole(button, { name: 去抽奖 }).click();//调整到抽奖页面await expect(page).toHaveURL(/user\/center\/lottery/);}});抽奖页面根据接口返回显示抽奖次数和奖品通过 network看到抽奖配置接口返回如下因此我的测试用例代码如下test(根据接口返回显示抽奖次数, async ({ page }) {await page.goto(https://juejin.cn/user/center/lottery);const promise await page.waitForResponse((res) res.url().includes(/growth_api/v1/lottery_config/get));const res await promise.json();const lotteryNames res.data.lottery.map((item) {if (item.unlock_count 0) {return new RegExp(item.lottery_name);} else {return new RegExp(再抽${item.unlock_count}次解锁);}});await expect(page.locator(.item-container .turntable-item)).toHaveText(lotteryNames);if (res.data.free_count) {await expect(page.locator(#turntable-item-0)).toHaveText(免费抽奖次数${res.data.free_count}次);} else {await expect(page.locator(#turntable-item-0)).toHaveText(单抽 200);}});有了以上断言我们便可以确保前端页面显示与接口返回显示一致。运行完成后可以在 playwright-report 查看测试报告。当然这是我学习 e2e 测试的一个例子不够准确也不够详情。小结本文介绍了 Playwright 测试框架的入门使用Playwright 是一个功能强大的端到端E2E测试框架支持多种编程语言 API适用于现代浏览器还可用于编写网络爬虫。首先介绍了 Playwright Test for VSCode 插件以及如何初始化测试项目如何运行测试用例并指出可以选择不同的浏览器作为测试环境 如何添加 Cookie 来模拟登录状态以及如何使用录制功能来自动生成测试代码。另外文章强调了使用 Locator 定位器替代语义化定位方法以提高测试的准确性。最后我们通过了一个掘金抽奖程序实例强调了断言的重要性以确保测试代码的可靠性。感谢每一个认真阅读我文章的人礼尚往来总是要有的虽然不是什么很值钱的东西如果你用得到的话可以直接拿走这些资料对于【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴上万个测试工程师们走过最艰难的路程希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取