Playwright Web Automation Testing

This is my personal project to improve my skills in automated testing using Playwright with Typescript. This project was created solely for my learning process and to showcase my testing skills.

Folder Structure

The repository is organized as follows:

/Playwright-web-automation-testing
├── tests/
│   ├── api_JsonPlaceholder/
│   ├── api_Petstore/
│   ├── api_ReqRes/
│   ├── api_RestfulBooker/
│   ├── e2e_AutomationExercise/
│   ├── e2e_AutomationPracticeShop/
│   ├── e2e_AutomationTestStore/
│   ├── e2e_JakTestowacPl/
│   └── e2e_ZeroBank/
├── tips/
├── utils/
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── README.md
├── eslint.config.mjs
├── package-lock.json
├── package.json
└── playwright.config.ts

Installation

• Instal Node.js

• Playwright Installation:

npm init playwright@latest

• ESLint Installation

npm install eslint --save-dev

• Configuration

npm init @eslint/config

• Add Prettier in .eslintrc.json file:

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
],

• Prettier Installation

npm install --save-dev --save-exact prettier

• Add file .prettierignore :

package-lock.json
README.md

• Add Prettier rule .prettierrc.json :

{
    "singleQuote": true,
    "endOfLine": "auto"
}

• Run formatting with Prettier npx prettier --write .
• Linking Prettier with ESLint npm install --save-dev eslint-config-prettier

Running Tests from command line:

• Command line: npx playwright test
• Run tests in UI mode: npx playwright test --ui
• Run tests in headed mode: npx playwright test --headed
• Run last failed tests: npx playwright test --last-failed
• Debug tests with the Playwright Inspector: npx playwright test --debug
• Test reports: npx playwright show-report

Add scripts to package.json file

"scripts": {
    "open:codegen:myshop": "npx playwright codegen http://www.automationpractice.pl/",
    "open:codegen:store": "npx playwright codegen https://automationteststore.com/",
    "open:codegen:bank": "npx playwright codegen http://zero.webappsecurity.com/",
    "open:ui": "npx playwright test --ui",
    "test": "npx playwright test",
    "test:headed": "npx playwright test --headed",
    "test:chromium": "npx playwright test --project=chromium",
    "test:chromium:headed": "npx playwright test --headed --project=chromium",
    "test:firefox": "npx playwright test --project=firefox",
    "test:firefox:headed": "npx playwright test --headed --project=firefox",
    "test:webkit": "npx playwright test --project=webkit",
    "test:webkit:headed": "npx playwright test --headed --project=cwebkit",
    "test:tag:failTest": "npx playwright test --grep @failTest",
    "test:tag:without": "npx playwright test --grep-invert @failTest",
    "prettier": "npx prettier --write .",
    "lint:check": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix"
  },

After that in terminal use npm ... e.g.:

• npm test
• npm run test:chromium:headed
• npm run prettier

VS Code plugins installed

• vscode-icons - enhances the visual experience by adding icons to files and folders, making navigation easier.
• JavaScript (ES6) code snippets - provides code snippets for JavaScript ES6 syntax, speeding up coding and learning new syntax patterns.
• ESLint - a powerful tool to identify and fix problems in JavaScript code, ensuring code quality and consistency.
• Prettier - Code formatter - automatically formats code to maintain a consistent style, making it more readable and standardized.
• GitLens - Git supercharged - enhances the Git capabilities of VS Code, making it easier to visualize code and navigate through repositories.
• Code Spell Checker - helps in catching common spelling errors, which is crucial for writing clean and professional code.
• GitHub Actions - used for automating workflows, which can include testing, building, and deploying JavaScript applications.
• Live Server - allows for a real-time preview of web pages, making it easier to see the effects of code changes instantly.

Tutorials:

• Playwright: Web Automation Testing From Zero to Hero
• Automated Software Testing with Playwright
• Playwright - Zwinna Panda - pl
• jaktestowac.pl
• playwright.info - Automatyzacja i testy z Playwright - pl
• Playwright Javascript
• Playwright API Testing - Kaniel Outis
• Playwright API Testing - LetCode with Koushik
• Playwright - Cucumber - TS

TypeScript:

• TypeScript - Podstawy
• TypeScript - Przeprogramowani.ts
• TypeScript for Test Automation