Adding Playwright to create-react-app generated projects
Summary
Shortly after I finished writing my previous post, the same team behind Puppeteer released Playwright, a similar Node library with two notable differences – it offers cross-browser functionality out of the box, and is from Microsoft, not Google. Playwright is essentially Puppeteer with cross-browser support – Chromium (Chrome, Edge), Webkit (Safari), and Firefox browsers can now be automated with a single API. As Playwright doesn’t automatically use my custom configuration file, I must pass these variables into the and functions, which will be discussed further in Writing Specs and Page Objects. This project follows the page object model – the UI structure has been separated from the specs (or tests) for easier readability and maintainability. Let’s look at the page object – As mentioned earlier, Playwright doesn’t automatically use the file, so our configuration variables must be imported before they can be used when launching our browser.