前端playwright 自动化测试

前端在日常就需要注重UI交互工作，在开发中如何实现UI交互的自动化测试（即通过模拟手动操作用户UI界面的方式，以代码方式实现自动操作和验证的一种自动化测试手段），提高系统的质量和可靠性，也能提前发现问题，减少解决问题时间成本。
常见的前端自动化测试框架有Selenium、Cypress、TestCafe、Playwright等，磨铁前端技术团队分享playwright的实际应用。
安装playwright

a. 首次安装：npm init playwright@latest命令执行后，会在当前项目中增加playwright.config.js、测试文件夹、测试demo、下载playwright浏览器，package.json中增加了@playwright/test，@types/node两个依赖。playwright.config.js是playwright的配置文件

js 复制代码

            module.exports = defineConfig({     
                testDir: './tests/test.browser',    // 测试目录
                fullyParallel: true,      
                forbidOnly: !!process.env.CI,    
                retries: process.env.CI ? 2 : 0,    
                workers: process.env.CI ? 1 : undefined,    
                reporter: 'html',    timeout: 100000,   
                // 超时时间，我们的接口超时时间是60s，这里设置的大一些   
                use: {    trace: 'on-first-retry',    },   
                /* Configure projects for major browsers */    
                projects: [ 
                     {name: 'chromium',   use: { ...devices['Desktop Chrome'] },},
                     {name: 'firefox',    use: { ...devices['Desktop Firefox'] },},
                     {name: 'webkit',    use: { ...devices['Desktop Safari'] },}
               ]
           });

go 复制代码

b.  非首次安装
 
 从远程拉取测试代码后，需要安装依赖：执行命令`npm install` 安装所需依赖，再执行`npx playwright install`安装浏览器

编写测试用例

go 复制代码

 playwright将指定测试目录下的`*.test.js `和` *.spec.js`文件都认为是测试文件（可在配置文件中修改）。在`tests/test.browser`目录下新建`example.test.js`

js 复制代码

        import { test, expect } from '@playwright/test';
        test('login', async ({ page }) => {    
                // 新打开一个页面，跳转到 http://***.motie.***/    
                await page.goto('http://***.motie.***/');    /
                / 找到登录页面引导的跳过按钮    
                const guide = await page.getByText('跳过');    
                // 点击跳过按钮    
                await guide.click();    
                // 等待引导浮层关闭    
                await page.waitForFunction((selector) => !document.querySelector(selector), '#driver-page-overlay');   
                // 找到账户名输入框    
                const user = await page.locator('#form_item_username');    
                // 测试输入框的占位文本是否是'账户名'      
                expect(await user.locator('input').getAttribute('placeholder')).toBe('账户名');    
                // 点击输入框    
                await user.click();    
                // 使用键盘输入'test'    
                await page.keyboard.type('test');
        });

执行测试用例

使用命令playwright test执行测试用例，默认会执行配置文件中设置的测试目录下所有的测试文件，可制定测试目录或测试文件，执行测试tests/test.browser/login/目录下的所有测试文件

bash 复制代码

# 使用 用户界面模式 执行测试tests/test.browser/ 目录下的所有测试文件
playwright test --ui
playwright test tests/test.browser/login/ 

# 执行测试tests/test.browser/example.test.js文件
playwright test tests/test.browser/example.test.js

将常用的命令配置在package.json中

json 复制代码

"scripts": 
  {  
      "playwright-login": "playwright test tests/test.browser/login/", 
      "playwright-test": "playwright test tests/test.browser/views/ && playwright show-report", 
      "playwright-test-ui": "playwright test --ui"
  },

用户界面模式：执行后会打开一个playwright浏览器，如图所示：

登录验证码需要通过接口破解，每次访问时自动填充，涉及到不同账号角色的需要配置.

相关连接 playwright中文网 playwright