Playwright is a newer ambitious Node library that wants to solve some problems regarding cross-browser testing. I’m just going to post a short blurb here because I was stuck for a few hours with very little info available on how to get started with testing something made with create-react-app.

I had a completely wrong idea at first, which was to use Playwright to test the normal npm start instance (where the normal create-react-app setup launches a development server and browser). Basically, I wasted a bunch of time trying to figure out how to test against that, only to figure out that the react-scripts weren’t too flexible in that regard, at all. The development server was best suited for a development workflow, not extensive browser testing.

The solution was rather simple and should have been obvious earlier: you should be testing against the production version, not a development server. In a few steps I set up an Express webserver that hosted the result folder from npm run build, and then I tested against that. You can view an example here: https://github.com/mukunda-/my-career-handled. It’s easy enough to set up a CI script to build the project and run the tests. The example above uses GitHub Actions for that. Playwright testing and Express server code is located in src/MyGame/EndToEnd.test.js.