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();
});

3、执行命令运行用例

cnpm test login.e2e.js

执行结果如下图所示:

img

扫描下方二维码,关注公众号:程序进阶之路,实时获取更多优质文章推送。


扫码关注

评论