'how to assert on the value of a form.submit() using stencil's puppeteer e2e tests

I have an e2e test for a stenciljs component in which I'd like to assert on the values that get submitted to the form. I'm getting an error that behaves like a race condition but I'm not sure where it may be. My test looks like this:

it('TEST THE VAUE of FORM SUBMISSION', async () => {
  //arrange
  const page = await newE2EPage();

  // ---- SET UP REQUEST HANDLER ----
  await page.setRequestInterception(true);
  page.on('request', (request) => {
    if (request.url() === 'http://test.com') {
      request.respond({
        content: 'application/json',
        headers: { 'Access-Control-Allow-Origin': '*' },
        status: 200,
        body: request.postData(),
    });
    } else {
      request.continue();
    }
  });

  // ---- SET UP FORM ELEMENT ----
  await page.setContent(`
    <form action="http://test.com" method="POST" >
      <sjs-checkbox id="unchecked" name="checked" value="no"></sjs-checkbox>
      <sjs-checkbox id="checked" name="checked" value ="yes" checked></sjs-checkbox>
    </form>`);  
  
  //act
  // INVOKE FORM SUBMIT
  const response = await page.evaluate(() => {
    const form = document.querySelector('form');
    form.submit();
  });

  //assert
  
  expect(await response).toBeDefined();
});

And here's the error message:

Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "requestfailed http://localhost:3333/~dev-server".

abds-checkbox › TEST THE VAUE of FORM SUBMISSION
    Request is already handled!

Again, this seems like a race condition but I’m not sure what I should be awaiting before making an assertion.
I'm using

  • stencil 2.10
  • puppeteer 10.4

Does anyone know how to assert on the value of a form.submit() using stencil's puppeteer e2e tests?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source