「自动化测试」新一代Web前端自动化测试框架——playwright快速上手！
注意：想运行playwright需要下载相关浏览器的二进制文件
由于默认情况下，Playwright会从MicrosoftCDN下载浏览器二进制文件。
公司内网会阻止对公共资源的直接访问，所以不能直接通过内网进行下载。
解决办法：
在外网，创建一个文件夹随后在该目录下呼出命令行并输入npmi-D@playwright/test
页面目录发生变化，并且命令行出现added193packagesin15s代表下载完成
随后命令行输入npxplaywrightinstall开始安装浏览器二进制依赖
待下载完成后进入到对应的目录，示例为：C:\Users\winches\AppData\Local\ms-playwright
将如图所示4个文件选中复制
将选中的4个文件粘贴到内网中的ms-playwright文件下
Playwright是一个测试和自动化框架，可以实现网络浏览器的自动化交互。简而言之，您可以编写打开浏览器的代码，用代码实现使用所有网络浏览器的功能。自动化脚本可以实现导航到URL、输入文本、单击按钮和提取文本等功能。Playwright最令人惊喜的功能是它可以同时处理多个页面且不用等待，也不会被封锁。
Playwright支持大多数浏览器，例如GoogleChrome、Firefox、使用Chromium内核的MicrosoftEdge和使用WebKit内核的Safari。跨浏览器的网络自动化是Playwright的强项，可以为所有浏览器有效地执行相同的代码。此外，Playwright支持各种编程语言，例如Node.js、Python、Java和.NET。您可以编写代码用于打开网站并使用这些语言中的任何一种与之交互。
使用Node.js创建playwright项目Playwright有自己的testrunner用于端对端测试，我们称之为PlaywrightTest.
初始化项目并安装playwright/test库，只需要两个简单的命令既可以完成
npm?init?-ynpm?i?-D?@playwright/test创建一个简单的脚本test-1.spec.ts
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});现在运行你的测试脚本
npm?playwright?testPlaywrightTest刚刚使用Chromium浏览器以无GUI（headless）的方式运行了一个测试（PlaywrightTest）。让我们告诉它使用有GUI（headed）模式运行浏览器：
npx?playwright?test?--headed其他浏览器呢？让我们使用Firefox运行相同的测试（PlaywrightTest）：
npx?playwright?test?--browser=firefox最后，在所有三个浏览器上：
npx?playwright?test?--browser=all配置文档要享受PlaywrightTest提供的所有功能，还需要创建一个配置文件playwright.config.ts（或playwright.config.js）。
下面是一些示例配置的介绍：
playwright.config.ts
import?{?PlaywrightTestConfig?}?from?"@playwright/test";?let?config:?PlaywrightTestConfig?=?{?????????timeout:?6?*?60?*?1000,??//?每个测试用例超时??????globalTimeout:?60?*?1000,?//?总超时??????????testDir:?"./demo",//测试目录??????????reporter:?[["html",?{?outputFolder:?"./",?open:?"always"?}]],//测试报告?????????use:?{?????????????????launchOptions:?{????????????????????headless:?false,?//不是无头模式????},??????????contextOptions:?{???????????????viewport:?{???//窗口视野大小??????????????????????width:?1400,????????????????????????height:?900,????????????????},????????},????????????//baseURL:?process.env.TENANT_URL,?//?基础URL???????????????screenshot:?"only-on-failure",?//?失败时截屏????????????trace:?"retain-on-failure",//?失败时跟踪记录??????????????browserName:?"webkit",?//?测试浏览器?????????},?};export?default?config;也可以通过npminitplaywright@latest项目名一键生成项目及配置
里面有开箱即用的配置
playwright.config.ts
import?type?{?PlaywrightTestConfig?}?from?'@playwright/test';import?{?devices?}?from?'@playwright/test';const?config:?PlaywrightTestConfig?=?{??/*?测试包含的目录?*/??testDir:?'./tests',??/*?一个测试可以运行expect（）应等待满足条件的最长时间的最长时间?*/??timeout:?30?*?1000,??expect:?{????/**?????*?expect（）应等待满足条件的最长时间?????*?例如，在'await?expect（locator）.toHaveText（）'?????*/????timeout:?5000??},??/*?如果意外退出测试，则无法在CI上构建。只有在源代码中?*/??forbidOnly:?!!process.env.CI,??/*?仅在CI上重试?*/??retries:?process.env.CI???2?:?0,??/*?选择退出CI的并行测试?*/??workers:?process.env.CI???1?:?undefined,??/*?Reporter?to?use.?See?https://playwright.dev/docs/test-reporters?*/??reporter:?'html',??/*?下面所有项目的共享设置。?See?https://playwright.dev/docs/api/class-testoptions.?*/??use:?{????/*?每个操作（如“click（）”）可以花费的最长时间。默认值为0（无限制）?*/????actionTimeout:?0,????/*?在“等待页面”等操作中使用的基本URL。转到（“/”）?*/????//?baseURL:?'http://localhost:3000',????/*?在重试失败的测试时收集跟踪.?See?https://playwright.dev/docs/trace-viewer更多配置的信息可以查看：配置信息
TestfixturesTestfixtures官网跳转
您注意到上面的测试脚本可以访问的参数{page}：
test('basic?test',?async?({?page?})?=>?{??...}我们称这些参数为fixtures.。Fixtures是为每次测试运行创建的对象。PlaywrightTest加载了这些fixtures，您也可以添加自己的fixtures。在运行测试时，PlaywrightTest会查看每个测试声明，分析测试所需的fixtures并专门为测试准备这些fixtures。
以下是您可能常用的预定义fixtures的列表：
FixtureTypeDescriptionpagePage此测试运行的独立页面。contextBrowserContext此测试运行的隔离上下文。page也属于这种情况。了解如何配置上下文。browserBrowser浏览器在测试之间共享以优化资源。了解如何配置浏览器。browserNamestring当前运行测试的浏览器的名称。要么chromium，firefox要么webkit。测试和断言特性如果您熟悉Jest、Mocha和Ava等测试运行程序，您会发现PlaywrightTest语法很熟悉。
PlaywrightTest使用expect库进行测试断言。它使用特定于Playwright的匹配器对其进行了扩展，以实现更大的测试工程。
这些是您可以通过测试执行的基本操作：
聚焦测试你可以集中一些测试。当有重点测试时，只有它们运行。
test.only('focus?this?test',?async?({?page?})?=>?{??//?在整个项目中只运行重点测试。});跳过测试你可以通过设置一些条件来跳过测试：
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});0分组测试您可以对测试进行分组以给它们一个逻辑名称或将范围之前/之后关联到组。
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});1测试钩子（testhooks）您可以使用test.beforeAll和test.afterAll钩子来设置和拆除测试之间共享的资源。您可以使用test.beforeEach和test.afterEach钩子分别为每个测试设置和拆除资源。
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});2写断言（expect）PlaywrightTest使用expect库进行测试断言。它提供了很多匹配器，toEqual,toContain,toMatch,toMatchSnapshot等等。
将expect与各种Playwright方法相结合，来实现测试目标：
page.isVisible(selector[,options])#
page.waitForSelector(selector[,options])#
page.textContent(selector[,options])#
page.getAttribute(selector,name[,options])#
page.screenshot([options])#
在断言指南中了解更多信息
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});3注意运行这个测试是如何输出的：
这里有常见的命令行参数.
Runtestsinheadedbrowsers（带浏览器UI模式运行）
npx?playwright?test?--headedRuntestsinaparticularbrowser（以指定的浏览器运行）
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});5Runtestsinallbrowsers（在所有浏览器运行测试）
npx?playwright?test?--browser=allRunasingletestfile（单测试文件）
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});7Runasetoftestfiles（多测试文件）
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});8Runatestwithspecifictitle（使用特定的标题运行测试）
const?{?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({?page?})?=>?{??//?打开一个页面并跳转到?https://playwright.dev/??await?page.goto('https://playwright.dev/');??//?通过类选择器，选中类目为navbar__title的元素的innerText??const?name?=?await?page.innerText('.navbar__title');??//?断言校验是否匹配??expect(name).toBe('Playwright');});9Runtestsinparallel-that'sthedefault（并行测试-默认）
npm?playwright?test0Disableparallelization（禁用并行）
npm?playwright?test0?--workers=1Chooseareporter
npm?playwright?test0?--reporter=htmlAskforhelp（请求帮忙）
npm?playwright?test0?--help在调试模式下运行(GUI工具)PlaywrightInspector是一个GUI工具，可帮助创作和调试Playwright脚本。
#?Linux/macOSPWDEBUG=1?npm?playwright?test0#?Windows?with?cmd.exeset?PWDEBUG=1npm?playwright?test0#?Windows?with?PowerShell$env:PWDEBUG=1npm?playwright?test0自动生成测试代码使用Playwright无需写一行代码，我们只需手动操作浏览器，它会录制我们的操作，然后自动生成代码脚本。
下面就是录制的命令codegen，仅仅一行。
npm?playwright?test5执行codegen并运行浏览器。PlaywrightInspector将记录用户交互动作并生成JavaScript代码codegen将尝试生成基于文本的弹性选择器。
（图示为）PlaywrightInspector
codegen的用法可以使用--help查看，如果简单使用就是直接在命令后面加上url链接，如果有其他需要可以添加options。
options含义：
-o：将录制的脚本保存到一个文件
--target：规定生成脚本的语言，默认为PlaywrightTest
-b：指定浏览器驱动
比如，我要在baidu.com搜索，用chromium驱动，将结果保存为test1.spec.ts的ts文件。
npm?playwright?test6命令行输入后会自动打开浏览器，然后可以看见在浏览器上的一举一动都会被自动翻译成代码，如下所示。
通过vscodePlaywrightTestforVScode插件生成代码通过在浏览器中执行测试操作来记录新的测试。
保留已验证状态执行codegen并指定--save-storage参数来保存cookies和localStorage。这对于单独记录身份验证步骤并在以后负复用它非常有用。
npm?playwright?test7使用--load-storage参数来加载先前的存储。通过这种方式，所有的cookies和localStorage将被恢复，使大多数web应用程序进入认证状态。
npm?playwright?test8具有自定义设置的Codegen如果你想在一些非标准的设置中使用codegen(例如,使用browserContext.route(url,handler)),可以调用page.pause()，它将打开一个带有代码生成控件的单独窗口。
npm?playwright?test9检查选择器（selectors）在open或codegen期间，您可以在任何浏览器的developertools控制台中使用以下API。
playwright.$(selector)查询Playwright选择器，使用实际的Playwright
web自动化有哪些功能
对于那些涉及大量接口交互的系统，接口自动化可以确保这些接口的稳定性和正确性，从而提升整个系统的质量。在某些情况下，接口自动化与Web自动化可以结合使用，以覆盖从后端接口到前端页面的所有测试场景，从而实现更全面的测试覆盖。值得注意的是，尽管Web自动化覆盖率较低，但它仍然能够提供重要的价值，特别...
前端自动化测试及Karma介绍
在文章《JavaScript单元测试的“抹茶”组合：Mocha和Chai》介绍了JavaScript的单元测试，并在文章《Chai和Mocha为API编写测试》展示了一个简单的实例，本文再来介绍一下自动化测试及工具Karma。Karma为前端自动化测试提供了跨浏览器测试的能力，它集成了像Jasmine（基于BDD的测试框架），PhantomJS（无界面的浏览...
web自动化测试js处理日期控件
如果js编写得不够好，我们可以在浏览器的Console控制台进行操作。由于Console具有自动补充语句的功能，我们可以在这里进行操作，然后将代码复制到代码中运行。我使用了getElementById方法进行定位，当然，你也可以根据标签选择其他方法。完成以上操作后，我们将浏览器Console中的代码复制到自动化代码中运行。运行...
常用的自动化测试工具有哪些
Selenium是一个用于Web应用程序测试的工具，Selenium已经成为Web自动化测试工程师的首选。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、Mozilla Firefox、Mozilla Suite等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作...
有哪些常见的自动化测试框架可以推荐?
对于web自动化测试，Python+selenium4的组合是常见的选择，它们提供了丰富的功能和强大的可扩展性。pytest作为测试框架，配合POM（Page Object Model）设计模式，可以清晰地组织测试用例，allure则用于生成详细和易于理解的测试报告，Jenkins用于持续集成，实现自动化测试流程的高效执行。此外，还有像TestNG、JUnit...
使用Playwright 搭建前端自动化测试工程 (上)
为区分不同测试环境（如生产环境、回归测试环境、本地开发环境等），可采用Vite的环境变量解决方案。创建环境变量文件，如`.env.production`，在测试脚本及`playwright.config.ts`中加载相应的环境配置。使用`cross-env`确保不同操作系统环境下环境变量的正确设置。结合`dotenv`包自动读取环境变量文件，调整`...
技术创想 | Cypress UI 自动化测试框架
长期以来，前端测试的自动化一直是一个大挑战。Cypress作为一个轻量级、一站式解决方案，拥有独特优势，适合在特定场景下使用。下面将详细介绍Cypress及其特性、安装与环境依赖、以及简单示例。Cypress是一个基于JavaScript的前端测试工具，它自集成，提供全面端到端测试，无需依赖其他外部工具，安装即可快速创建...
平均年薪20W,自动化测试工程师这么吃香?
学习自动化测试，需系统掌握：掌握一门编程语言，推荐Python。学习前端基础知识，以提高元素定位能力。数据库学习，熟悉增删改查操作。具体学习路线包括接口自动化测试、UI自动化测试与持续集成，涉及HTTP\/HTTPS协议、接口文档、接口测试工具、Mock测试等知识。自动化测试领域涵盖广泛，深入学习需至少5年时间。
自动化测试岗位要求(自动化测试招聘要求)
富士康测试岗和自动化相关吗富士康的自动化测试岗位主要是把前端测试脚本化，能够快速准确地运行测试，对用例建模、断言、日志分析、测试报告等绝迅锋都有所涉及。这个岗位要求有自动化测试经昌伍验、并晌有系统性思维、熟悉自动化测试脚本、强大的编程能力、能够独立解决问题等等。测试工程师岗位要求任职要求...
WebUI 自动化测试的经典设计模式:PO
先来看下未使用 PO(PageObject) 设计模式下的代码，以网页版百度登录为例来说明。非 PO(PageObject) 模式下的代码如下，所有内容全部写在一个方法里。存在的问题：PO(PageObject) 模式优化后的代码 1、WebUI 自动化需要的 driver 基础操作 2、登录页面元素获取 3、登录逻辑业务的封装 4、登录测试...