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
├── .github/
│   └── workflows
├── .vscode/
│   └── settings.json
├── tests/
│   ├── api_JsonPlaceholder/
│   ├── api_Petstore/
│   ├── api_ReqRes/
│   ├── api_RestfulBooker/
│   ├── e2e_AutomationExercise/
│   ├── e2e_AutomationPracticeShop/
│   ├── e2e_AutomationTestStore/
│   ├── e2e_JakTestowacPl/
│   └── e2e_ZeroBank/
├── tips/
│   ├── conventional_commits.md
│   ├── playwright.md
│   └── vscode.md
├── utils/
├── .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

• Add .eslint.config.mjs file:

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.{js,mjs,cjs,ts,tsx}'],
    ignores: ['node_modules/', 'tips/', 'utils/', 'README.md'], // Add ignored paths here
    languageOptions: {
      parser: tsParser,
      globals: {
        ...globals.browser,
        process: true,
      },
    },
    plugins: {
      '@typescript-eslint': tseslint,
    },
    rules: {
      ...pluginJs.configs.recommended.rules,
      ...tseslint.configs.recommended.rules,
      '@typescript-eslint/no-unused-expressions': [
        'error',
        {
          allowShortCircuit: true,
          allowTernary: true,
          allowTaggedTemplates: true,
        },
      ],
    },
  },
];

• 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:zerobank": "npx playwright codegen http://zero.webappsecurity.com/",
    "open:codegen:demobank": "npx playwright codegen https://demo-bank.vercel.app/",
    "open:codegen:automationexercise": "npx playwright codegen https://automationexercise.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",
    "report": "npx playwright show-report",
    "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

CI/CD with GitHub Actions

This project includes workflows for running automated tests using GitHub Actions. You can manually trigger these workflows from the Actions tab in the repository.

Available Workflows:

• E2E Automation Exercise Tests: Runs end-to-end tests located in the tests/e2e_AutomationExercise folder.
• API JsonPlaceholder Tests: Runs API tests located in the tests/api_JsonPlaceholder folder.

How to Trigger Workflows:

1. Go to the Actions tab in the repository on GitHub.
2. Select the desired workflow:
   • E2E Automation Exercise Tests for end-to-end tests.
   • API JsonPlaceholder Tests for API tests.
3. Click the Run workflow button and follow the instructions to start the tests.

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