Basic Template for Playwright Automation Tests in Javascript
This open-source project was created during discovery of best-fit tool for Icon web application
-
Playwright requires Node.js version 14 or above. If you are using node version less than 14 then you can download Node.js version 14 or above from nvm (nvm allows you to easily switch between node versions depending on the project)
- If you are not using nvm already, you can download it and install Node.js from here
- Clone e2e-tests repository using following command:
git clone git@github.com:mahnoorfatiima/Playwright-Automation.git
cd
intoPlaywright-Automation
and run the below commmands:
npm ci
npx playwright install
-
To run all tests use
npx cross-env ENV=VF_PROD playwright test
This would run all tests on VF production environment -
You can change environment as per the requirement. Following are the configured environment values:
VF_PROD
,VF_QA
,CM_PROD
,CM_QA
,CM_LOC
VF_PROD
,VF_QA
point to one domain andCM_PROD
,CM_QA
,CM_LOC
point to different domain
-
To run a single test spec file use
npx cross-env ENV=VF_PROD playwright test login.spec.js
-
To run multiple test spec files use
npx cross-env ENV=VF_PROD playwright test login.spec.js addTemplate.spec.js
-
To run a single test inside spec file use test title
npx cross-env ENV=VF_PROD playwright test -g "Unsuccessful login"
-
By default tests run in headless mode if you want to run in headed browser add
--headed
at the end on your command- For example use
npx cross-env ENV=VF_PROD playwright test --headed
- For example use
-
To record a test use codegen command along with the URL of website you want to record tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead.
- For recording use
npx playwright codegen https://portal.voicefriend.net/login
- For recording use
- Playwright config is setup to use HTML reporter by default. Html reporter show detailed information about the test failures with screenshots and traces. Html report is generated automatically after test run is executed
-
Use command
--reporter=line,allure-playwright
at the end of your tests to generate data in allure-results folder -
Now, you can view allure report using
allure serve
-
Speed Comparison: Playwright took ~28s, ~31s, ~33s to run all 3 tests and averaged ~31 seconds. It was even more faster with paralell execution
-
Test Framework: Playwright is more flexible and gives you more control over the test runner framework you choose
-
Additional Downloads: Playwright has a native API for handling iframes or mobile device emulations without requiring any additional downloads or plugins.
-
Test Recording: Playwright uses codegen command to run the test generator followed by the URL of the website you want to generate tests for.
npx playwright codegen
-
Navigating to new Domain: Playwright provides built-in support for cross-domain testing, making it easier to test scenarios that involve interactions between different domains or origins.
Based on the specific scope of my web application, Playwright has proven to be the most suitable choice. The selection between Playwright and Cypress depends on the system's requirements, considering factors such as browser support and the complexity of testing scenarios. Playwright's versatility and comprehensive browser compatibility make it ideal for diverse testing needs, while Cypress offers simplicity and ease of use for straightforward scenarios. It is crucial to evaluate these frameworks in relation to your project's unique demands to make an informed decision.
- Key findings for Cypress can be found here