In our first article on Playwright Tutorial for Beginners, we covered how you can install playwright and write your first test script. After this, we saw the steps using which you can run your playwright tests on Firefox browser.
We used this command to run the test script on Firefox browser – npx playwright test example.spec.js --project "firefox" --headed. In this article, we will dive in a bit deeper to understand how you can run your Playwright tests on different browsers as well. So let’s get started !!
Understanding projects section in playwright.config file
As mentioned before, we had used npx playwright test example.spec.js –project “firefox” –headed command to run our test script on Firefox browser. More specifically, it is this part – --project "firefox" which tells Playwright to execute the test script on Firefox browser. To understand how this works, we would need to refer to the playwright.config file
First of all, go to playwright-tutorial folder and then open playwright.config file
Scroll down a bit till you see projects section in playwright.config file. This is the section where you configure projects for major browsers.
In this section, you would notice that the first 3 options are chromium, firefox and webkit. You can also see that chromium is mapped with Desktop Chrome, firefox with Desktop Firefox and webkit with Desktop Safari. These are the same browsers that you installed during Playwright installation process
Now, coming back to the original point – when you mention --project "firefox" while running your test –
- Playwright will check the projects sections in config file
- it will figure out that Desktop Firefox is mapped with the name “firefox”
- and hence, your test script will run on Desktop Firefox browser (which you had installed during Playwright installation process)
Go ahead and use this command to run your test script – npx playwright test example.spec.js --project "chromium" --headed. You will notice that, this time Playwright will open Chromium browser and run your test script.
Testing against branded browsers
Till now, we have executed our test script against the browsers that come with default playwright configuration (like Chromium). But you might have a requirement where you would need to test your code against actual public use browsers like Chrome. As an example, consider a scenario where your team is releasing some feature and you need to perform regression testing against a given version of Chrome that is publicly available.
To do this, check projects section in playwright.config file again. You would notice that there are two more sections which might be commented out – Test against mobile viewports and Test against branded browsers
Uncomment the section under Test against branded browsers. Make sure you have Chrome installed on your machine. Now you can mention “Google Chrome” with projects option (npx playwright test example.spec.js --project "Google Chrome" --headed), which will run your test script on the public version of Google Chrome installed on your machine
Other than running your tests against a single browser, you can run tests against multiple browser combinations as well. Let us see how this can be done
Running tests against all browsers
If you want to run the same test against all the browsers, you can simply remove –project option from the run command. This means that you are not specifying any browser while running the scripts, and hence Playwright will run the same tests against all the browsers
Command – npx playwright test example.spec.js --headed
After you run the test, view its HTML report. You will see that the report has listed down the runs against all the browsers which are mentioned in projects section in playwright.config file
Run tests against more than one browser
Instead of running tests on only one or on all the browsers, you can run the tests on more than one browsers as well. To do that, you have to mention –project multiple times and then mention the browser names. For example, we can use the following command if we want to run our tests on both chromium and public chrome version
Command – npx playwright test example.spec.js --project "chromium" --project "Google Chrome" --headed
This completes our article on running playwright test cases with different browser combinations. If you have any queries, please feel free to contact us using the comments section.