https://github.com/thanasornsawan/playwright_automation_everything
This repo contains database testing, api testing, web testing and github action cicd to send notification to slack
https://github.com/thanasornsawan/playwright_automation_everything
api automated-testing database graphql playwright playwright-javascript qa-automation testing web
Last synced: about 2 months ago
JSON representation
This repo contains database testing, api testing, web testing and github action cicd to send notification to slack
- Host: GitHub
- URL: https://github.com/thanasornsawan/playwright_automation_everything
- Owner: Thanasornsawan
- Created: 2024-12-29T16:21:39.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-04T09:46:12.000Z (3 months ago)
- Last Synced: 2025-03-12T17:18:23.805Z (about 2 months ago)
- Topics: api, automated-testing, database, graphql, playwright, playwright-javascript, qa-automation, testing, web
- Language: JavaScript
- Homepage:
- Size: 26.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```javascript
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**
```sh
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](https://github.com/zealous-tech/testrail-reporter/tree/main)
**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](https://github.com/qase-tms/qase-javascript/tree/main/qase-playwright#configuration)
**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
```sh
npx allure generate allure-results -o allure-report --clean
npx allure open allure-report
```
**Run test oracle db with playwright and allure report**
```sh
npx playwright test tests/database_testcase/oracle_user.spec.js --reporter=allure-playwright
```
## Setup .env configuration
```sh
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**
```sh
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**
```sh
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.
```sh
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
```sh
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:
```sh
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:
```sh
node src/server.js
```
Result after run test:
