Question

我正在使用Jest＆Puppeteer为Vue.js编写的前端应用程序编写自动化测试

到目前为止，我设法编写了一组测试，但是它们都位于同一文件中：

import puppeteer from 'puppeteer';
import faker from 'faker';

let page;
let browser;

const width = 860;
const height = 1080;
const homepage = 'http://localhost:8001/brt/';
const timeout = 1000 * 16;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false, // set to false if you want to see tests running live
    slowMo: 30, // ms amount Puppeteer operations are slowed down by
    args: [`--window-size=${width},${height}`],
  });
  page = await browser.newPage();
  await page.setViewport({ width, height });
});

afterAll(() => {
  browser.close();
});

describe('Homepage buttons', () => {
  test('Gallery Button', async () => {

    // navigate to the login view
    await page.goto(homepage);
    await page.waitFor(1000 * 0.5); // without this, the test gets stuck :(

    await page.waitForSelector('[data-testid="navBarLoginBtn"]');
    await page.click('[data-testid="navBarLoginBtn"]'),

    await page.waitForSelector('[data-testid="navBarGalleryBtn"]');
    await page.click('[data-testid="navBarGalleryBtn"]'),

    // test: check if we got to the gallery view (by checking nr of tutorials)
    await page.waitForSelector('.card-header');
    const srcResultNumber = await page.$$eval('.card-header', (headers) => headers.length);
    expect(srcResultNumber).toBeGreaterThan(1);
  }, timeout);
});

describe('Register', () => {
  const btnLoginToRegister = '#btn-login-to-register';
  const btnRegister = '#btn-register';
  const btnToLogin = '#btn-goto-login';

  test('Register failed attempt: empty fields', async () => {
    // navigate to the register form page via the login button
    await page.goto(homepage);
    await page.waitForSelector(navLoginBtn);
    await page.click(navLoginBtn);
    await page.waitForSelector(btnLoginToRegister);
    await page.click(btnLoginToRegister);

    // test; checking for error messages
    await page.waitForSelector(btnRegister);
    await page.click(btnRegister);
    const errNumber = await page.$$eval('#errMessage', (err) => err.length);
    expect(errNumber).toEqual(3);
  }, timeout);

  test('Register failed: invalid char count, email format', async () => {
    // fill inputs
    await page.waitForSelector('#userInput');
    await page.type('#userInput', 'a');
    await page.waitForSelector('#emailInput');
    await page.type('#emailInput', 'a');
    await page.waitForSelector('#emailInput');
    await page.type('#passInput', 'a');
    await page.waitForSelector(btnRegister);
    await page.click(btnRegister);

    // test: check if we 3 errors (one for each row), from the front end validations
    const err = await page.$$eval('#errMessage', (errors) => errors.length);
    expect(err).toEqual(3);
  }, timeout);

  test('Register: success', async () => {
    await page.click('#userInput', { clickCount: 3 });
    await page.type('#userInput', name1);
    await page.click('#emailInput', { clickCount: 3 });
    await page.type('#emailInput', email1);
    await page.click('#passInput', { clickCount: 3 });
    await page.type('#passInput', password1);
    await page.waitForSelector(btnRegister);
    await page.click(btnRegister);

    // test: check if go to login link appeared
    await page.waitForSelector(btnToLogin);
    await page.click(btnToLogin);

    // await Promise.all([
    //   page.click(btnToLogin),
    //   page.waitForNavigation(),
    // ]);
  }, timeout);

  test('Register failed: email already taken', async () => {
    // navigate back to the register form
    await page.waitForSelector(btnLoginToRegister);
    await page.click(btnLoginToRegister);

    await page.click('#userInput');
    await page.type('#userInput', name2);
    await page.click('#emailInput');
    await page.type('#emailInput', email1); // <- existing email
    await page.click('#passInput');
    await page.type('#passInput', password2);

    await page.click(btnRegister);

    const err = await page.$eval('#errMessage', (e) => e.innerHTML);
    expect(err).toEqual('Email already taken');
  }, timeout);
});

我希望能够有一个单独的测试文件来执行beforeAll和afterAll之类的东西，以及每个测试套件：HomepageButtons，Register等，以驻留在它自己的测试文件中。我将如何实现这一目标？

我尝试将tets拆分为： testsUtils.js将包含beforeAll和afterAll挂钩和代码，但不能保证它在需要时运行：beforeAll代码在所有其他测试文件之前触发，afterAll代码在所有测试文件完成之后触发。 / p>

Answer 1

对不起，我想评论您的问题，但我对此没有声誉。无论如何，我认为您正在寻找类似“ global beforeAll”和“ global afterAll”的钩子，对吗？开玩笑已经。称为“ globalSetup”和“ globalTeardown”。

看看globalSetup。摘录：

此选项允许使用自定义全局设置模块，该模块导出在所有测试之前触发一次的异步函数套房。

全球拆解同样如此。我认为您在尝试在globalSetup / globalTeardown中引用page或browser时会感到头疼，并且我承认我从未尝试过。可能是该问题的答案（如果有的话）位于this page的“不带玩笑者预设部分的自定义示例”下。

还有一个回购尝试帮助Jest + Puppeteer集成。也许您发现它实用：repo。

祝你好运。：）

如何将Jest + Puppeteer测试分为多个文件？

1 个答案: