Playwright – Cucumber – Typescript Setup

21 August 2023

What is the Playwright Framework?

Playwright is an open-source automation framework for web browsers developed by Microsoft. It provides a high-level, cross-browser API for automating browser tasks such as web page navigation, interaction, data extraction, and testing. Playwright supports Chromium (Google Chrome), Firefox, and WebKit (Safari) browsers, allowing developers and testers to write consistent automation scripts across multiple browser engines.

What is the Cucumber Framework?

The Cucumber framework is a widely used open-source tool for behavior-driven development (BDD). Cucumber allows you to write executable specifications in a natural language format that is easy to understand by both technical and non-technical team members. These specifications are written in a format called Gherkin.

• Example:
  • Feature: I want to log in to the system
  • Scenario: Successful login
    • Given the user is on the login page
    • When the user enters valid credentials
    • And click the login button
    • Then the user should be redirected to the dashboard
    • And a welcome message should be displayed

Playwright-Cucumber-Typescript Setup Installation

• Open a new folder in VScode and then open the terminal of vs code
• In the terminal type the first command.

  $ npm init -y //It will install the pacakaj.json file
  $ npm init playwright@latest // choose typescript
  $ npm i -D @cucumber/cucumber@7.3.1 @cucumber/pretty-formatter
  $ npm i playwright @cucumber/cucumber typescript ts-node @types/node-D
  $ npx -p typescript tsc --init

• Now open the tsconfig.json file and write the below code
  
• Create two new folder
  • features
  • Step-definitions
    Create Folder Structure: Create a folder structure in your project directory like this::
    
• Now inside the features folder create a new file
  • Assignment.feature
  • After this open file Assignment.feature write the below code
    
• Then inside the step-definitions folder create a new file
  • stepElement.ts
  • Now open the file stepElement.ts and write the below code in that file
    
• Now create one another file
  • test.setup.ts // for cucumber config
  • Inside the test.setup.ts file write the below code //If you already have a file called cucumber.conf.js you can rename it to test.setup.ts and compare it with the below code (do changes if needed)
    
• Inside the package.json file add the below script
• Now the setup is completed for running it using the below command

  $ npm run test features/Assignment.feature

Questions Related to the Playwright

• package-lock.json/package.json: The package.json file is generated during the initialization of the project and contains information regarding your project, entry points for test execution, custom scripts, and package dependencies. The package-lock.json plays a slightly different role. It tracks the exact version of every package installed.
• Playwright.config.js: This file contains all the configuration required for your Playwright project. You can configure timeouts, parallelism, retries, reporters, and browsers, just as a brief example! It is open to tons of customization and adjustment to meet your test suite’s requirements.
• Workers: By default, the number of workers being used will always be 8 (undefined), and when running in a CI environment, it will be 1. You can change these values in your playwright.config.js to run more or fewer tests in parallel, depending on your hardware capabilities. This is worth experimenting with in small increments to get a feel of what best suits your needs while maintaining a fast test execution time.
• Reports: Use this command to generate reports:

  npx playwright show-report

Why playwright automation is necessary?

• Cross-Browser Compatibility Testing: Playwright supports multiple browser engines, including Chromium (Chrome), Firefox, and WebKit (Safari). This allows you to test your web applications on different browsers to ensure they work correctly and consistently across various browser environments.
• Automation of Repetitive Tasks: Playwright automation is highly efficient for automating repetitive tasks like form submissions, data entry, and navigation, freeing up human testers to focus on more complex testing tasks.
• Continuous Integration (CI/CD) Integration: Playwright automation can be seamlessly integrated into CI/CD pipelines, enabling automated testing on every code commit. This ensures that code changes are thoroughly tested before being deployed to production.

Playwright automation Disadvantages

• Maintenance Overhead: Automated tests require maintenance to keep them up-to-date as your application evolves. Changes in the application’s structure or UI may lead to test failures that need to be fixed promptly.
• Flakiness: Automated tests can sometimes exhibit flaky behavior, where they fail intermittently due to timing issues, network fluctuations, or other factors. Handling flakiness can require additional effort.
• Browser Updates: Browsers regularly release updates, and these updates can sometimes introduce changes that impact the way automation works. Keeping up with browser updates and ensuring compatibility can be challenging.

Conclusion

A playwright is an incredibly versatile framework with features. It makes writing automation tests very simple, and you’ll be building up large suites of tests in a fraction of the time you would with others. Also, the entry bar is kept low, so it won’t be intimidating if you introduce it to a new team.