modernweb-dev
Guide for puppeteer end-to-end testing
Hey,
I was wondering if anywhere there is an example of using web-test-runner to run a test that:
- Serves a website (from
src/ordemo/or anywhere in your project). - Uses puppeteer to load a page.
- Uses puppeteer to check some text is displayed.
I've been looking around your docs for a while, but I can't find anything that pulls all of this together.
- Test Runner: Getting Started runs tests on a local JS file.
- Test Runner: Browsers says how to run your tests with puppeteer but doesn't say how to load with or interact with a page.
- Browser Launchers: Puppeteer says how to configure puppeteer, but not actually use it.
- example-projects/puppeteer covers how to assert things on elements that you create inside the test.
I have tried writing a test that starts the dev server manually, but I'm hitting problems there too.
example.test.js:
import { startDevServer } from '@web/dev-server';
// ...
Running npx web-test-runner test/example.test.js --node-resolve gives:
🚧 Browser logs:
SyntaxError: The requested module './dist/index.js' does not provide an export named 'default'
I feel I'm missing something basic/not understanding how this project is meant to be used, so I was hoping it would be possible to see an example for what I want to do (which I assume must be a fairly standard thing to do).
WTR currently is meant to let tests run in the browser. To a certain extent Playwright APIs can be utilized via the usage of dedicated commands, such as sendKeys which allow you to simulate real™ keys by calling Playwright/Puppeteer APIs for this.
With tests running in the browser certain things are not possible to be reliably tested (pseudo-states, file uploads, ...).
Have a look at: https://github.com/modernweb-dev/web/issues/1670 for some info from the devs.
We were in the same misery, and we cobbled together something with Mocha + DevServer to retain the same syntax / setup (Chai.expect, Mocha tests, TS). If you are willing to have a different syntax, I'd advise you to give @playwright/test a look. Sadly, it relies on Jest.expect and does not offer an easy way to replace it.
