TestAutomation_using_Playwright

Table of Contents

About the Project

Technology

Prerequisites

Installation

Using Inspector

Command lines

Allure Report

🔆 Technologies

---

• Playwright
• Typescript
• excel-js
• adm-zip
• ESLint
• Lighthouse
• pdfjs-dist-es5
• allure-playwright
• allure-commandline

🔆 Prerequisites

---

You need the following prerequisites installed on your device to be able to run and contribute to this project:

1. Git -> Download Git or Download GitHub Desktop
2. Visual Studio Code -> Download VSCode
3. NodeJS -> Download NodeJS
4. Getting start from the Playwright docs
5. Playwright marketplace-> Installing Playwright test for VS Code

Note: Always make sure to download the latest stable version compatible with your OS and CPU architecture.

🔆 Installation

---

1. Clone the project using GitHub Dekstop.
2. Ensure that you've installed the official Playwright VS Code plugin, and ran this Command line in the project root directory.

npm install

3. Open the project folder in VS Code by clicking File > Open Folder....
4. Open the terminal by clicking and run this commnad line

npm init playwright@latest 

🔆 Updating Playwright

---

1. Updae Node JS

npm i

2. Update playwright

npm install -D @playwright/test@latest

3. Check version

npx playwright --version

🔆 Using Inspector

---

For better inspector run this command and click on any element to inspect it.

npx playwright codegen playwright.dev

🔆 Command lines

---

👉 Click here to see the command lines

• Update packages

npm i

• Check Playwright Current Version

npx @playwright/test --version

• Update Playwright to the latest version

npm install @playwright/test@latest

• Running All tests run this command

npx playwright test

• Running the tests in headless mode run this command

npx playwright test --headed

• Running a single test run this command

npx playwright test googleTest.spec.ts

• Running a set of test run this command

npx playwright tests/googleTests

• Generating the report run this command

npx playwright show-report reports/playwright-report

• Generate and serve a temporary allure report by running this command

allure serve reports/allure-results

• Generate and open report by running this command to generate the report

allure generate reports/allure-results -o allure-report --clean

and then this command to open the report

allure open allure-report

• Open the monocart-report -which provides a lightweight tree view for all your tests in a single file- by opening this file in your preferred browser reports/monocart-report/report.html.
• Open the native playwright-report by opening this file in your preferred browser reports/playwright-report/index.html.
• You can open the saved trace using Playwright CLI or in your browser on trace.playwright.dev.

npx playwright show-trace path/trace.zip

• You can download the trace.zip file from any of the reports, or explore them manually under the reports/test-artifacts/ directory. To open a playwright trace report you should use your preferred browser to navigating to Playwright Trace Viewer, and then drag/drop the trace archive file to open it.

🔆 Allure Report

---

👉 Steps to using allure report

• Step 1: install the allure-playwright node package

npm i -D allure-playwright

• Step 2: Install the allure-commandline node package. Allure Commandline is a tool to generate Allure report from test results. Allure requires Java 8 or higher. To install, use the command:

npm i -D allure-commandline

• Step 3: Now to run the tests with allure-playwright reporter we will use the command:

npx playwright test --reporter=line, allure-playwright

• Step 4: Using the allure commandline we will now generate the allure report. To do that we will use the command:

npx allure generate ./allure-results --clean

• Step 5: Finally, we will open the HTML report on a browser using the command:

npx allure open ./allure-report

🔆 Project structure

---

👉 Click here to see the project structure

📦 Test Automation using Playwright
  ┣ 📂.github
  ┃ ┗ 📂workflows
  ┃ ┃ ┗ 📜CI.yml
  ┣ 📂reports
  ┃ ┣ 📂allure-results
  ┃ ┣ 📂downloads
  ┃ ┣ 📂lightHouse-report
  ┃ ┣ 📂logd
  ┃ ┣ 📂monocart-report
  ┃ ┣ 📂playwright-report
  ┃ ┣ 📂test-artifacts
  ┣ 📂src
  ┃ ┣ 📂lib
  ┃ ┃ ┣ 📜ApiActions.ts
  ┃ ┃ ┣ 📜BaseFixtures.ts
  ┃ ┃ ┣ 📜CustomeReporter.ts
  ┃ ┃ ┣ 📜DBActions.ts
  ┃ ┃ ┣ 📜FakerData.ts
  ┃ ┃ ┣ 📜FileActions.ts
  ┃ ┃ ┣ 📜Helper.ts
  ┃ ┃ ┣ 📜PageBase.ts
  ┃ ┃ ┣ 📜WebActions.ts
  ┃ ┣ 📂pages
  ┃ ┃ ┣ 📂examples
  ┃ ┃ ┣ 📂google
  ┃ ┃ ┣ 📂nopCommerce
  ┣ 📂tests
  ┃ ┣ 📂data
  ┃ ┣ 📂e2e
  ┣ 📂typescript
  ┣ 📜.gitignore
  ┣ 📜config.ts
  ┣ 📜global-setup.js
  ┣ 📜global-tearDown.js
  ┣ 📜package-lock.json
  ┣ 📜package.json
  ┣ 📜playwright.config.json
  ┣ 📜README.md
  ┗ 📜tsconfig.xml