Sample project to demonstrate Playwright Test usage, pointing to ServeRest API and Front-end

Last update: Oct 24, 2022

Overview

demo-playwright-test

This is a sample project to demonstrate Playwright Test usage, running tests against ServeRest API and Front-end.

Pre-requisites

Node.js

Make sure to have the correct Node version installed, which can be found in .nvmrc file in the repository root. It is recommended to use nvm to manage different Node versions in your environment.

Yarn

The project also uses Yarn, so follow the installation steps in case you don't have it.

Docker

The projects used Docker to spin up ServeRest API. Follow instructions from their official docs to install Docker engine in your environment.

Structure

Code is structured as shown below:

demo-playwright-test/
 ├── lib/
 │    ├── helpers.js                        # Helper functions used in tests
 ├── tests/
 │    ├── api
 │         ├── login.api.test.js            # API tests
 │    ├── e2e
 │         ├── create-user.e2e.test.js      # End-to-end tests
 ├── playwright.config.js                   # Playwright configuration file

PS: Note that different test levels are configured to have proper extensions (e.g: *.api.test.js).

Running locally

Install dependencies: yarn install
Start Serverest server: yarn api:start
Run API tests: yarn test:api
Run End-to-end tests: yarn test:e2e

Tips

To stop running ServeRest container: docker stop serverest
To restart ServeRest container: docker restart serverest
To remove ServeRest container (no need to stop it first, the -f option will force its removal even if it is running): docker rm -f serverest

Reporting

Test reports can be generated with Allure reports, following the steps below:

Generate report: yarn allure:generate
Open HTML report: yarn allure:open

CI

The project uses GitHub Actions and tests are run automatically on PRs and on merge to main branch.

Comments

Setup visual and a11y tests
Description

Setting up a sample a11y test with axe-playwright and a couple of visual regression tests using happo-playwright integration. Also, configured a CI job for visual regression tests and enabled Happo app in the repository.

How to test

yarn install

Check a11y test in tests/e2e/create-user.e2e.test.js (it's skipped as it will always fail, since the component has a11y issues)

To run visual regression tests: yarn test:visual (you will need an account on Happo to run it locally)

Check Happo report with added screenshots

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by stefanteixeira 3
Add example of schema validation test with Joi
Description

Adding a simple schema validation test with Joi, to demonstrate how it can be done. Also, removing expect-playwright lib, which was unnecessary (closes #42)

How to test

yarn install

yarn api:start

yarn test:api

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by stefanteixeira 2
configuring gh-pages - waiting for environment configuration.
Description

Add config - gh-pages #10

How to test

ND

Comments

This PR needs admin help to choose gh-pages in config. @stefanteixeira 🐤

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review help wanted work in progress
opened by uLucasFraga 2
Add API test for "Product not found" scenario in Product API
Description

Add API tests for Product not found scenarios in the task can be seen here.

How to test

yarn install && yarn api:start && yarn test:api

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by uLucasFraga 1
Add http-status-codes lib on the API tests
Description

Add http-status-codes lib on the API tests: lib here.

PS: Refactor all API tests.

Acceptance Criteria

Add lib on the tests created: tests/api/*.api.test.js

Check the use of awaits in the validation of expect.

Test is stable and successfully passing on CI
opened by uLucasFraga 1
Add API tests for complete order and cancel order actions
Description

I'm creating new test scenarios to cancel and delete an order in the cart.

The task can be seen here.

How to test

yarn install && yarn test:api

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by uLucasFraga 1
[#13] add new api tests for complete order and cancel order actions
Description

I'm creating new test scenarios to cancel and delete an order in the cart.

The task can be seen here.

How to test

yarn install && yarn test:api

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by uLucasFraga 1
[docker] add docker for local tests in Servertest
Description

Adding a job with docker for local tests

How to test

NOTHING

Comments

This PR needed to change the baseURL to run locally. In the future, I'd like to use it with an env or in another "smarter" way. 😆

Checklist

[x] Branch name follows the pattern: feature-description

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

[x] PR has a descriptive name

ready to review
opened by uLucasFraga 1
Update serverest package on project
Description

Update serverest package on project: 2.62.2v.

Comments

This change modified the project constants. Due to this change, I refactored the necessary tests and updated the package.json.

How to test

yarn install && yarn api:start && yarn test:api

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by uLucasFraga 0
Remove expect-playwright library
expect-playwright library is not necessary, since the Locator assertions from Playwright Tests cover all the necessary cases and can cause conflicts.

Acceptance Criteria

Remove dependency from package.json

Remove its references from the config file and any existing test
opened by stefanteixeira 0
Update serverest package on project
Description

Update serverest package to latest stable version: SERVEREST The naming of all its constants has been changed for a correct usage pattern and other necessary improvements.

Docker Image: https://hub.docker.com/r/paulogoncalvesbh/serverest

Acceptance Criteria

Edit tests that are using the serverest package, ex: tests/api/product.api.test.js file

New test follows the same approach and naming conventions as the existing ones

Test is stable and successfully passing on CI
opened by uLucasFraga 0
Add e2e for search product functionality
Description

Adding new scenarios for e2e testing of search a product. Also, edited Helper lib. The task here.

How to test

yarn install

yarn api:start

yarn test:e2e

Checklist

[x] Branch name follows the pattern: concise-feature-description

[x] PR has a descriptive name

[x] PR branch is up-to-date with main (if not, rebase it)

[x] Double-check the quality of commit messages

ready to review
opened by uLucasFraga 0
Add API tests for "Route exclusive for admin users" scenarios in Product API
Description

Add API tests for "Route exclusive for admin users" scenarios in Product API. Make sure to cover it for POST, PUT and DELETE methods.

PS: To avoid hardcoding the error message, let's simply assert that the response status is 403.

Acceptance Criteria

New tests are created in the current tests/api/product.api.test.js file

New tests are following the same approach and naming conventions as the existing ones

Tests are stable and successfully passing on CI
opened by stefanteixeira 0
Add End-to-end test for Search Product functionality
Description

Add End-to-end tests for Search Product functionality (accessible from https://front.serverest.dev/home page).

Ideally, it should perform the following steps:

Make an API request to create a product (check tests/api/product.api.test.js for an example, but remember to point the request to ServeRest Production API).

Login as a regular user

Search by the product name

Verify that there is a single result containing that product

Acceptance Criteria

Tests are properly using Playwright's Locator API (tip: create-product.e2e.test.js for a similar example of Locator usage)

Tests are added in a proper test file, such as tests/e2e/search-product.e2e.test.js

ready to review
opened by stefanteixeira 0
Add End-to-end tests for Add Product to List and Delete Product List functionalities
Description

Add End-to-end tests for Add Product to List and Delete Product List functionalities (accessible from https://front.serverest.dev/home page).

Ideally, it should perform the following steps:

Login as a regular user

Add the first product to the list, by clicking Add to List button

Verify that the user got redirected to /minhaListaDeProdutos

Verify that there is only 1 product being displayed

Acceptance Criteria

Tests are properly using Playwright's Locator API (tip: create-product.e2e.test.js for a similar example of Locator usage)

Tests are added in a proper test file, such as tests/e2e/product-list.e2e.test.js
opened by stefanteixeira 0
Add End-to-end test for Logout functionality
Description

Add End-to-end test for Logout functionality.

Ideally, it should perform the following steps:

Login as Admin user

Click on Logout button

Verify that the user is redirected to Login page

Acceptance Criteria

Tests are properly using Playwright's Locator API (tip: create-product.e2e.test.js for a similar example of Locator usage)

Tests are added in a proper test file, such as tests/e2e/logout.e2e.test.js
opened by stefanteixeira 0
Add End-to-end tests for Delete User functionality
Description

Add End-to-end tests for Delete User functionality (accessible from https://front.serverest.dev/admin/listarusuarios page).

Ideally, it should perform the following steps:

Login as Admin user

Create a dummy user (tip: use the API helper for that 💡 , but remember to point the request to ServeRest Production API)

Open /admin/listarusuarios

Click on Delete button for the user you created

Verify that the user is not visible on the list

Acceptance Criteria

Tests are properly using Playwright's Locator API (tip: create-product.e2e.test.js for a similar example of Locator usage)

Tests are added in a proper test file, such as tests/e2e/delete-user.e2e.test.js
opened by stefanteixeira 0