0

我正在为我的 React 应用程序的 e2e 测试而苦苦挣扎，为了进行上述测试，我正在使用 Puppeteer 和 Jest，使用 Jest 文档在此处提供的自定义配置。问题是我需要让所有套件在不使用任何后端的情况下运行，所以我需要拦截请求并模拟所有正常完成的响应。

问题是我不知道如何在短时间内或异步并行拦截多个，我一直在寻找互联网并使用了一段时间await page.removeAllListeners('request')，但这似乎取决于测试的接近程度执行它们，因此拦截未启动或弹出以下错误：Request is already handled!

这是我目前正在努力的测试：

test('Can apply filters to the reports list table', async () => {

await page.goto(siteUrl);

await page.waitForSelector('#loginForm');

await page.click('input[name=email]');
await page.type('input[name=email]', loginData.email);

await page.click('input[name=password]');
await page.type('input[name=password]', loginData.validPasswd);

await page.click('button[id=normalLogin]');

await page.waitForNavigation();

await page.setRequestInterception(true);

page.on('request', async request => {
  if (request.url().includes('/cdb/technologies/')) {
    await request.respond({
      status: 200,
      content: 'application/json',
      body: JSON.stringify(technologies)
    });
  } else {
    request.continue();
  }
});

await page.waitForSelector('#REPORTS');
await page.click('#REPORTS');

await page.removeListener('request');

page.on('request', async request => {
  if (request.url().includes('/assets/60359910429b6264d7459667/analyses/')) {
    await request.respond({
      status: 200,
      content: 'application/json',
      body: JSON.stringify(severalReports)
    });
  } else {
    request.continue();
  }
});

await page.waitForSelector('#reports-table');

await page.removeListener('request');

await page.waitForSelector('#filter-icon');
await page.click('#filter-icon');

await page.waitForSelector('#filter-dialog');

await page.click('#technology-select');

await MaterialSelect(page, 'Oil analysis', '#technology-select');

await page.waitForTimeout(3000);

await page.click('#search-btn');

await page.waitForTimeout(2000);

await page.click('#search-btn');

page.on('request', async request => {
  if (request.url().includes('/assets/1234/analyses/')) {
    await request.respond({
      status: 200,
      content: 'application/json',
      body: JSON.stringify(technologyFilteredReports)
    });
  } else {
    request.continue();
  }
});

await page.$x('//p[contains(.,"1-3 of 3")]');

const table = await page.$("#reports-table");
expect(table).not.toEqual(null);

await page.setRequestInterception(false);


}, globalData.timeout);

这个想法是用户登录，进入我要测试的视图，打开一个过滤器，然后过滤显示在表格上的数据，确保结果的数量与表格分页上的结果一样。

test('Can add a comment on a report pdf', async () => {

await page.goto(siteUrl);

await page.waitForSelector('#loginForm');

await page.click('input[name=email]');
await page.type('input[name=email]', loginData.email);

await page.click('input[name=password]');
await page.type('input[name=password]', loginData.validPasswd);

await page.click('button[id=normalLogin]');

await page.waitForNavigation();

await page.waitForSelector('#REPORTS');
await page.click('#REPORTS');

await page.setRequestInterception(true);
page.on('request', async request => {
  if (request.url().includes('/assets/123456/analyses/')) {
    await request.respond({
      status: 200,
      content: 'application/json',
      body: JSON.stringify(severalReports)
    });
  } else {
    request.continue();
  }
});

await page.waitForSelector('#reports-table');

const [button] = await page.$x('//p[contains(.,"Early fault")]');
if (button) {
  await button.click();
}

await page.removeAllListeners('request');

page.on('request', async request => {
  if (request.url().includes('analyses/12345')) {
    await request.respond({
      status: 200,
      content: 'application/json',
      body: JSON.stringify(report)
    });
  } else {
    request.continue();
  }
});

await page.waitForSelector('#pdf-report');
await page.$x('//object[@*]');

await page.waitForTimeout(4000);

await page.waitForSelector('#comment-box');

await page.click('textarea[name=commentBox]');
await page.type('textarea[name=commentBox]', 'This is a test');

await page.click('#send-comment');

await page.waitForTimeout(2000);

await page.waitForSelector('#close-btn');
await page.click('#close-btn');

await page.waitForNavigation();

await page.waitForSelector('#reports-table');

const table = await page.$("#reports-table");
expect(table).not.toEqual(null);

await page.setRequestInterception(false);


}, globalData.timeout);

另一方面，这个其他测试使用await page.removeAllListeners('request')但不一致，因为当我需要的不仅仅是我基本上同时完成的拦截时，我必须遗漏一些东西或完全以错误的方式做这件事。

所以基本上，在 puppeteer 上处理多个异步请求拦截的正确方法是什么？

4

0 回答 0