Self-practice playwright

Playwright web testing

Click to see detail about web testing

Full automate E2E test cases

This practice use website https://practicesoftwaretesting.com/ for testing.

The file structue for tool demo web test cases:

project-root/
│   ├── web/
│       └── pages/
|            |- tool_shop/
│               ├── basePage.js
│               ├── cartPage.js
│               ├── invoiceDetailPage.js
│               ├── loginPage.js
│               ├── myInvoicesPage.js
│               ├── navBarPage.js
│               ├── productDetailPage.js
│               ├── registerPage.js
│               ├── searchPage.js
│       └── features/
|            |- tool_shop/
│               ├── productFeature.js
│   ├── utils/
│       └── pdfUtils.js
│       └── otpUtils.js
│   ├── data/
│       └── tool_shop/
|            |- userData.json
│   ├── tests/
│       └── tool_shop/
|            |- cart.spec.js
|            |- e2e.spec.js
|            |- product.spec.js
|            |- search.spec.js

Re-use login state by login API before jump to any pages

This practice use website https://ecommerce-playground.lambdatest.io/index.php for testing.

Click to see detail about using login state by login API

At first, we intercept network and check endpoint for login API and payload and then make API request in ``LambdaTestApiUtils.js`` file
and then we use ``await page.context().addCookies(apiCookies);`` for add cookie from login API before proceed to any page.
In the test script ``lambdatest_product_detail.spec.js``, we only test add product to cart, verify toast popup and total qty in cart

Re-use login state by use local storage file before jump to any pages

This practice use website https://opensource-demo.orangehrmlive.com for testing.

Click to see detail about using local storage file login

At first, we use admin account go to PIM menu to create different role accounts (In our case is testerQA1, testerQA2)

Then, we try use employee role account to access privilege page that only admin can do. We can see alert message below.

First step, we run npx playwright test tests/orangehrm/save_states.spec.js --reporter=list to make all 3 accounts login
the same time with Promise.all() and saves all login-related data (cookies, localStorage) to thier state file
Then, in role_test.spec.js, we use the state file

   const adminTest = test.extend({
   storageState: '.auth/state-admin.json'
});

Using adminTest instead of test:
adminTest('Admin can access Employee List', ...) looks similar to regular test() but with one key difference

• Every time you use adminTest, Playwright automatically loads the admin's login state before running the test
• You don't need to manually log in anymore - the state file handles that
• test.extend() in Playwright, creating a customized version of the test function
  Think of it as saying "I want all tests using this function to have these special settings"
  

TDD testing with Playwright

Click to see all TDD testing

Database setup

if you use mac M1, you might have problem build docker oracle same me, recommend to use colima start docker

brew install colima 
colima start --arch x86_64 --memory 4
docker-compose up -d

Refer blog about [Running Oracle Database on Docker on Apple M1 Chip](https://oralytics.com/2022/09/22/running-oracle-database-on-docker-on-apple-m1-chip/)

Now, you can see postgresql and oracle database running inside Colima like this

How to connect and setup sample data via oracle db

Click to see how to setup oracle db and make sameple data

How to connect and setup sample data via postgresql db

Click to see how to setup postgresql db and make sameple data

How to setup sample data via mongo db

Click to see how to setup mongodb sample data

How to setup sample data via mysql db

Click to see how to setup mysql sample data

Report integration

Click to see all reports integration detail

Report integrate with TestRail

using testrail-reporter, see full documentation testrail-reporter here

Result after run test case, result sent to TestRail

Click to see all TestRail results

Report integrate with Qase

using qase-playwright, see full documentation qase playwright here

Result after run test case, result sent to Qase

Click to see all Qase results

Report integrate with Allure

Click to see all Allure results

npx allure generate allure-results -o allure-report --clean
npx allure open allure-report

Run test oracle db with playwright and allure report

npx playwright test tests/database_testcase/oracle_user.spec.js --reporter=allure-playwright

Setup .env configuration

QASE_TESTOPS_API_TOKEN=**your_playwright_token_app_on_qase**
QASE_TESTOPS_PROJECT=**your_project_code**
TESTRAIL_API_TOKEN=**your_testrail_token***
TESTRAIL_USER=**your_email_account_testrail***
TESTRAIL_BASE_URL=https://**your_testrail_domain**.testrail.io

Get your qase token from app menu here

Get your TestRail api token from your setting menu here

command to run project with qase report

QASE_MODE=testops npx playwright test

CICD integration

Click to see cicd detail

## Azure Devops CICD pipeline send slack notification to slack I wrote step by step on this blog [Playwright with Azure Devops Pipeline (Self-hosted) and Slack notification](https://medium.com/@wisdomgoody/playwright-with-azure-devops-pipeline-self-hosted-and-slack-notification-e15f5cb96cc1)

Github CICD send notification to slack

Step 1: Set Up Slack Incoming Webhook

1. Go to your Slack workspace.
2. Navigate to Apps → Search for "Incoming Webhooks."
3. Set up a new webhook for the channel you want to send notifications to.
4. Copy the webhook URL.

Step 2: Store Slack Webhook URL as a GitHub Secret

1. Go to your GitHub repository.
2. Navigate to Settings → Secrets and variables → Actions → New repository secret.
3. Add a secret:

• Name: SLACK_WEBHOOK_URL
• Value: Paste the Slack webhook URL.

Playwright API testing

Click to see API testing detail

API testing with Node.js (express server)

Click to see detail API testing with Node.js server

Setup .env configuration

DB_USER=**your_db_user_same_like_docker_setup**
DB_PASSWORD=**your_db_password_same_like_docker_setup**
DB_NAME=ecommerce
DB_HOST=localhost
DB_PORT=5432
JWT_SECRET=**your_API_SECRET_KEY**
API_SERVER_PORT=3000
DATABASE_URL=postgres://your_db_user:your_db_password@localhost:5432/ecommerce

After postgresql db on docker running, we can create more database and grant privilege on that database like this
** if you noticed my docker-compose.yml file, the postgresql db was setup with db_name: testdb for database testing.

CREATE DATABASE ecommerce;
GRANT ALL PRIVILEGES ON DATABASE ecommerce TO testuser;

Install all dependencies need for run API server (Nodejs express) with permanent database sequelize

npm install express sequelize pg pg-hstore jsonwebtoken bcrypt express-validator express-rate-limit helmet dotenv

The file structue for setup API server:

project-root/
├── models/
│   ├── index.js
│   ├── user.js
│   ├── profile.js
│   ├── product.js
│   ├── order.js
│   ├── orderItem.js
│   └── review.js
├── routes/
│   ├── middleware/
│   │   ├── auth.js
│   │   └── validators.js
│   │   └── xml-parser.js
│   ├── utils/
│   │   └── validators.js
│   ├── admin.routes.js
│   ├── auth.routes.js
│   ├── order.routes.js
│   ├── products.routes.js
│   └── user.routes.js
│   └── reviews.routes.js
│   └── advance-xml.routes.js
│   └── form-image.routes.js
├── .env
└── server.js

each models file refer to table name in postgresql, it is database schema for setup via sequelize nodejs
and server.js is file that contains all API endpoint from routes folder for testing. You can run by this command:

node server.js

You can also test API manually via Postman before make the test script

The file structue for API test cases:

project-root/
├── api/
│   ├── adminPage.js
│   ├── apiHelper.js
│   ├── authPage.js
│   ├── orderPage.js
│   ├── productPage.js
│   ├── userProfilePage.js
│   ├── formImagetransactionPage.js
│   ├── XMLTransactionPage.js
│   ├── data/
│       └── api/
|            |- json_payload.json
│       └── images/
|            |- small_image.jpg
|            |- invalid_image.jpg
|            |- large_image.jpg
│   ├── tests/
│       └── api/
|            |- user_redirection_access.spec.js
|            |- admin_inventory.spec.js
|            |- user_order_products.spec.js
|            |- complex_jsonpath_tests.spec.js
|            |- advance_xml.spec.js
|            |- upload_form_data.spec.js

Note:

• user_order_products.spec.js focus on API testing with all methods (GET, POST, PUT, PATCH, DELTE) with authenticate user JWT token (use db)
• user_redirection_access.spec.js focus on privilege usage that only admin can access and verify all unauthorised status code (use db)
• admin_inventory.spec.js focus on business logic fill stocks with define threshold (positive, negative value, invalid) (use db)
• complex_jsonpath_tests.spec.js focus on how to filter specific value from complex json body to verify
• advance_xml.spec.js focus on how to filter xml and prase xml strcuture to verify value in API response
• upload_form_data.spec.js focus on how to validate file size, upload image file, file type and request body as form-data (use memory storage multer library)

Result after run test each files:

API testing with Apollo server (Graphql)

Click to see detail API testing with Apollo server

The file structue for API test cases:

project-root/
├── api/
│   ├── bookPage.js
│   ├── data/
│       └── queries/
│           └── createBook.js
│           └── deleteBook.js
│           └── filterBook.js
│           └── getBook.js
│           └── updateBook.js
│   ├── book_payload.json
├── tests/
│   ├── api/
│   │   ├── book_management/
│   │   │   ├── auth/ 
│   │   │   │   └── auth.spec.js      
│   │   │   ├── crud/
│   │   │   │   └── crud.spec.js          
│   │   │   ├── validation/
│   │   │   │   └── validation.spec.js    
│   │   │   ├── filtering/
│   │   │   │   └── filtering.spec.js     
│   │   │   ├── error/
│   │   │   │   └── error.spec.js         
│   │   │   └── utils/
│   │   │       └── test.setup.js

The file structue for setup API server:

project-root/
├── src/
│   ├── middleware/
│   │   └── authMiddleware.js   # control all operation to use API key
│   ├── models/
│   │   └── Book.js             # Book entity
│   ├── resolvers/
│   │   └── bookResolvers.js    # GraphQL resolvers
│   ├── schema/
│   │   └── typeDefs.js         # GraphQL schema definitions
│   ├── services/
│   │   └── BookService.js      # Business logic
│   ├── types/
│   │   └── errors.js           # define error code  
│   └── server.js

command to start server:

node src/server.js

Result after run test: