Skip to content

rajatt95/TestAutomationFramework_YT_Rajat_Web_Playwright_JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

37 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


πŸ’» Test Automation Framework | WEB

Playwright JavaScript

VS Code Playwright HTML Reporter GitHub Actions

πŸ“‘ Table of Contents

πŸ“– Introduction

This repository contains a Test Automation Framework built using Playwright and Javascript for automated testing of web applications.

πŸ› οΈ Prerequisites

  • Node.js (v18.16.1 or higher recommended)
  • npm (v9.5.1 or higher recommended)

▢️ Getting Started

  1. Clone the repository:

    git clone https://github.com/rajatt95/TestAutomationFramework_YT_Rajat_Web_Playwright_JS.git
  2. Navigate to the project directory:

    cd TestAutomationFramework_YT_Rajat_Web_Playwright_JS
  3. Install dependencies:

    npm install

πŸš€ Running Tests

  • Playwright UI mode:

    npm run tests:ui-mode
  • Execution in different browsers:

    • Chrome EdgeFirefox WebKit Chromium
    npm run tests:CHROME
    npm run tests:EDGE
    npm run tests:FIREFOX
    npm run tests:WEBKIT
    npm run tests:CHROMIUM
  • Execution in Headless mode:

    npm run tests:CHROME:HEADLESS

πŸ“ Project Structure

The tests follow a modular and maintainable structure:

|-- .github
|     |-- workflows
|          |-- 01_ui_tests_chrome.yml
|          |-- 02_ui_tests_select_one.yml.yml
|          |-- 03_ui_tests_ALL.yml
|-- pages
|     |-- BasePage.js
|     |-- CartPage.js
|     |-- Components.js
|     |-- LoginPage.js
|     |-- ProductsPage.js
|-- test-data
|     |-- login_credentials.json
|-- tests-saucedemo
|     |-- components.spec.js
|     |-- login.spec.js
|-- utils
|     |-- VerificationUtils.js
|     |-- WaitUtils.js
|-- .gitignore
|-- package.json
|-- playwright.config.js
  • pages: Contains the Page Object Model (POM) classes representing web pages and their elements.
  • playwright-report: Contains the HTML report for tests (Logs, Screenshots, Traces and Videos are attached).
  • test-data: Contains external files (example: login credentials data) that can be used to mock data during tests.
  • tests-saucedemo: Contains the actual test files. You can organize your tests into subdirectories as needed.
  • utils: Contains the Utilities that provides methods for asserting different conditions on web elements, waits.

βš™οΈ Configuration

  • Modify playwright.config.js for playwright configuration settings such as
    • baseURL
    • testDir
    • reporter
    • fullyParallel
    • video
    • screenshot
    • trace

πŸ”„ Continuous Integration

This project is configured for CI using Github Actions. Check the configurations in .github/workflows/*.yml.

  • 01_ui_tests_chrome.yml: This workflow executes tests in Chrome browser.

  • 02_ui_tests_select_one.yml: This workflow will first ask User to select the browser for tests execution.

  • 03_ui_tests_ALL.yml: This workflow executes the tests in all browsers

    Chrome EdgeFirefox WebKit Chromium

πŸ“Š Reporting

Playwright HTML report (Logs, Screenshots, Traces and Videos are attached) is stored in the playwright-report directory.

πŸ”­ Other Projects

  • Java - Selenium Appium Rest Assured

  • JavaScript - Cypress Playwright

  • Python - Requests

πŸ“„ Technical Documents

  • Google Drive
  • GitHub Repository

πŸ“§ Contacts

  • Email
  • GitHub Profile
  • GitHub Page
  • LinkedIn
  • Topmate
  • Telegram
  • Instagram
  • YouTube
  • WhatsApp Community
  • WhatsApp Channel

Feel free to reach out if you have any questions, or suggestions, or just want to chat!

Thanks for visiting my GitHub profile! 😊

rajatt95