https://github.com/codewithmmak/playwright-javascript

This is a test automation framework designed using Playwright and JavaScript.
https://github.com/codewithmmak/playwright-javascript

e2e-boilerplate e2e-framework e2e-tests javascript nextjs nextjs-testing playwright playwright-javascript playwright-test-runner playwright-tests test-automation

Last synced: about 1 month ago
JSON representation

This is a test automation framework designed using Playwright and JavaScript.

• Host: GitHub
• URL: https://github.com/codewithmmak/playwright-javascript
• Owner: codewithmmak
• Created: 2022-05-06T06:51:23.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-29T14:26:00.000Z (about 2 months ago)
• Last Synced: 2024-10-29T17:35:28.508Z (about 2 months ago)
• Topics: e2e-boilerplate, e2e-framework, e2e-tests, javascript, nextjs, nextjs-testing, playwright, playwright-javascript, playwright-test-runner, playwright-tests, test-automation
• Language: JavaScript
• Homepage:
• Size: 496 KB
• Stars: 19
• Watchers: 2
• Forks: 9
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
---

# Playwright and JavaScript Setup Guide

---

## Features of this framework

* [Design Pattern: Page Object Model](https://playwright.dev/docs/test-pom)

* [Reporting: Allure](https://www.npmjs.com/package/allure-playwright)

* [Cloud Integration: SauceLab](https://saucelabs.com/)

* [Deep Deletion](https://www.npmjs.com/package/rimraf)

## Getting started

### Pre-requisites

* Download and install Node.js

* Download and install any Text Editor like Visual Code/Sublime/Brackets

### Setup Visual Code

* Install GitLens Extension from the Marketplace: `GitLens — Git supercharged by GitKraken https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens`

* Go to Visual Code Preference > Setting and search `formatOnSave` and enable/ON it.

### Setup Scripts 

* Clone the repository into a folder

* Go to Project root directory and install Dependency: `npm install`

* All the dependencies from package.json would be installed in node_modules folder.

### How to write Test

* Add new spec under `e2e-tests` folder

* Name the file as .spec.js (e.g. home.spec.js)

* Create folder under page-objects/pages as  (e.g. homePage)

* Under page folder create constant, helper and page object file.

    * .constants.js (e.g. home.constants.js)

    * .helper.js (e.g. home.helper.js)

    * .po.js (e.g. home.po.js)

### How to Run Test

* Go to Project root directory and run command: `npm test`

* If you want to run e2e tests then run command: `npm run e2e`

### How to Update local npm packages

* Go to Project root directory and run command: `npm update`

### How to view HTML report

* Go to Project root directory: `./playwright-report/index.html`

### How to view failed test screenshot

* Go to Project root directory: `./test-results/`

### Sample Allure Test Report

![Playwright and JavaScript Test Report](./assets/test-report.png?raw=true "Playwright and JavaScript Test Report")

![Playwright and JavaScript Test Report Expanded View](./assets/test-report-expanded-view.png?raw=true "Playwright and JavaScript Test Report Expanded View")

### How to run Test on SauceLabs

* [SauceLabs Quickstart](https://docs.saucelabs.com/web-apps/automated-testing/playwright/quickstart/)

    * Set Environment Variables:

        * Open Terminal

        * Run `touch ~/.bash_profile; open ~/.bash_profile`

        * In TextEdit, add

        * `export SAUCE_USERNAME=“YOUR USERNAME”`

        * `export SAUCE_ACCESS_KEY="YOUR ACCESS KEY"`

        * Save the .bash_profile file and Quit (Command + Q) Text Edit.

        * In Terminal echo $SAUCE_USERNAME

        * In Terminal echo $SAUCE_ACCESS_KEY

    * Configure:

    `saucectl config` 

    * Run tests: `npm saucectl run`