木偶戏工作不稳定。怎么了?

时间:2020-09-10 12:23:38

标签: javascript reactjs jestjs puppeteer

我应该在我的 React.js 应用中检查来自服务器的响应数据。我使用 Jest Puppeteer “ ^ 5.2.1”。
单击带有id =“ test-settings”的按钮(转换为另一页面)后,会进行前两个数据检查,通常会发生错误,有时没有错误。令人惊讶的是,相同的代码有时效果很好,但通常效果不佳。为什么不稳定
我经常收到错误消息:

Protocol error (Network.getResponseBody): No resource with given identifier found

我的app.test.js:
const puppeteer = require('puppeteer');

let browser;
let page;
jest.setTimeout(30000);

describe('Http response', () => {
  test('checking response data on app', async (done) => {
    browser = await puppeteer.launch({
      headless: true,
      ignoreHTTPSErrors: true,
      // slowMo: 20, // 250
      // args: ['--start-maximized'],
      // devtools: true
    });
    page = await browser.newPage();
    const user = 'John';
    const pass = '123456';

    await page.goto('http://localhost:3000');
    await page.waitForSelector('.LoginPage__form');

    await page.click('input[name=username]')
    await page.type('input[name=username]', user)
    await page.click('input[name=password]')
    await page.type('input[name=password]', pass)

    await page.click('button[type=submit]') // or await page.keyboard.press('Enter')

    // Checking response data on request "/login"
    const loginResponse = await page.waitForResponse(res => res.url().endsWith('/login') && res.status() === 200);
    const expectedLoginResponseData = { isLoggedIn: true, user_id: expect.any(String) };
    expect(JSON.parse((await loginResponse.buffer()).toString())).toStrictEqual(expectedLoginResponseData);

    // Checking response data on request "/show_token"
    const showTokenResponse = await page.waitForResponse(res => res.url().endsWith('/show_token') && res.status() === 200);
    expect(JSON.parse((await showTokenResponse.buffer()).toString())).toStrictEqual(expect.objectContaining({ token: expect.any(String) }));

    await page.waitForSelector('.Board')

    await page.waitForSelector('.App-header');
    await page.click('#test-settings');
    
    // Checking response data on request "/get_resources"
    const getResourcesResponse = await page.waitForResponse(res => res.url().endsWith('/get_resources') && res.status() === 200);
    const data = JSON.parse((await getResourcesResponse.buffer()).toString());
    expect(data).toStrictEqual(expect.objectContaining({ resources: expect.any(Array) }));

    done();
  });
});

describe('Logout', () => {
  test('users can logout', async (done) => {
    await page.click('#test-login');

    await page.waitForSelector('.alert-info')
    const finalText = await page.$eval('.alert-info', el => el.textContent);
    expect(finalText).toBe('Welcome to Web App!Please fill in your credential');

    await browser.close();
    done();
  });
});

我跑步时

npm run test

我得到了错误: enter image description here

后来我更改了代码并使用Promise.all
最好是因为在第一阶段没有暂停Chromium,但是错误相同。

const [, loginResponse, showTokenResponse] = await Promise.all([
  page.click('button[type=submit]'),
  page.waitForResponse(res => res.url().endsWith('/login') && res.status() === 200),
  page.waitForResponse(res => res.url().endsWith('/show_token') && res.status() === 200)
]).catch(error => {
  console.error(error);
});
// console.log(await loginResponse.json());
// console.log(await showTokenResponse.json());

const expectedLoginResponseData = { isLoggedIn: true, user_id: expect.any(String) };
const receivedLoginResponseData = JSON.parse((await loginResponse.buffer()).toString());
expect(receivedLoginResponseData).toStrictEqual(expectedLoginResponseData);

const expextedTokenResponseData = expect.objectContaining({ token: expect.any(String) });
const receivedTokenResponseData = JSON.parse((await showTokenResponse.buffer()).toString());
expect(receivedTokenResponseData).toStrictEqual(expextedTokenResponseData);

enter image description here

0 个答案:

没有答案