React使用puppeteer实现e2e自动化测试
本文主要介绍如何在React中使用puppeteer给你讲实现e2e自动化测试。e2e端到端测试也叫冒烟测试，用于测试真实浏览器环境下前端应用的流程和表现，相当于代替人工去操作应用。
1、引入puppeteer组件
引入 puppeteer 作为 E2E 测试的工具，puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。它默认使用 chrome / chromium 作为浏览器环境运行你的应用，并且提供了非常语义化的 API 来描述业务逻辑。
import puppeteer from 'puppeteer';2、编写测试用例
例如：实现输入错误的用户名和密码进行登录，预期结果登录失败。
describe('Login', () => {
it('should login with failure', async () => {
browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'], });
const page = await browser.newPage();
const params = '/user/login';
await page.goto(`${BASE_URL}${params}`);
console.log('Page Loaded：', `${BASE_URL}${params}`);
// await page.screenshot({ path: 'screenshot.png' });
const username = await page.$x(XPATH_USERNAME);
// console.log('elements：', elements);
await username?.[0]?.type('mockuser');
const password = await page.$x(XPATH_PASSWORD);
await password?.[0].type('wrong_password');
const btn = await page.$x(XPATH_BUTTON_LOGIN);
await btn?.[0].click();
await page.waitForSelector('.ant-alert-error'); // should display error
await page.waitFor(TIME_WAIT);
await page.close();
browser.close();
});
