Claypot Store--Playwright

Claypot Store is a ecommerce website that provides clay based pots to the customers. It is basically a demo wordpress site that is integrated the woocommerce plugin, created to perform necessary automation testing using Playwright.

Visit Claypot Store:

Development and testing of Claypot Store (uses woocommerce plugin) are given below:

How Demo Wordpress Website was Developed for Testing Purpose

1. Install wordpress local from the website and create a local site named "ClaypotStore" in local app

2. Start the site button, login to admin section of the site and Kiosko theme is selected for the ecommerce site

Integrate Woocommerce Plugin with Wordpress Themes

1. Install woocommerce plugin
2. Add features such as login,register,product search,product display,cart,checkout,header and footer,home pages are integrated into claypot store from the woocommerce plugin
3. All the pages are customized and integrated all the necessary functionalities from woocommerce plugin before the testing phase

After integrating all the functionalities, Claypot Store is ready for testing.

Test Wordpress Site with Wordpress Plugin

The claypot store is a wordpress site that uses woocommerce plugin. The online store consists of the following pages:

1. Login Page
2. Register Page
3. Home Page
4. Header & Footer
5. Shop Page
6. Product Display Page
7. Cart Page
8. Checkout Page

Test Environment:

• Local WP application
• Website URL(Localhost): http://localhost:10016/
• Browser: Microsoft Edge
• Code Editor: VS Code
• Operating System: Windows 10
• Device: Desktop, Mobile(iPhone 15 Pro Max) and Tablet(iPad gen 7)

Testing Steps:

• Open Local WP application and start the site
• Go to Microsoft Edge and type the URL in the address bar:
  http://localhost:10016/
• The site is hosted in localhost and then open playwright and start writing functional, API, end to end test scripts to test the application
• After completeing test scripts,tests are excuted in the terminal

Multiple types of testing are performed in all the website functionalities as well as in the API functionalities.Below are the list of testings perfomed in the playwright:

1. Functional Testing: Clay pot store homepage, login,register,cart,shop,search and product display and checkout page functionality have been tested individually.The below command is given to test a specific module
   

   npx playwright test ***fileName*** --project=***Device option from config file*** --headed

2. API Testing: Restful APIs are included here and tested throughly. Mainly three kinds of API such as


1. Customer API: Throgh this API, Customers data were viewed,created,updated and deleted through GET,POST,PUT/PATCH,DELETE http methods.


2. Order API: Similar to Cutomer API but this API deals with the customer orders and these order data were viewed,created,updated and deleted through GET,POST,PUT/PATCH,DELETE http methods.


3. Product API: Similar to order API but this API focuses on the Shop products data and product data were viewed,created,updated and deleted through GET,POST,PUT/PATCH,DELETE http methods.


3. Smoke Testing:In all the necessary functionalities are included in smoke test file and to run the specific smoke test file below command is generated in the terminal
   

   npx playwright test ***file_name*** --project=***Device option from config file*** --headed

4. Full Regression Testing:All the test script has been included in regression test suite where the test script are tagged in with regression test so by simply running the below command can enable the entire regression test
   

   npx playwright test --grep @regression --project=***Device option from config file*** --headed

5. Compatibility Testing: Desktop, Mobile(iPhone 15 Pro Max) and Tablet(iPad gen 7) are used to test the compatibility of all the devices to view the Clay pot store website.
   Device name and browser option must be included in the playwright config file before running the test
   Below command is used to run the test file.

   npx playwright test ***fileName*** --project=***Device option from config file*** --headed

6. E2E (End to End) Testing: From Login to product checkout end to end testing scenario has been covered in this testing where user login to order placement and user log out all had been done sequentially to test the website for end to end scenario.

Woocommerce Rest API Testing:

Woocommerce Rest API is included in the Claypot Store website.To test API,first

1. Rest API needs to enabled in the Woocommerce settings option
2. Create API key and pass the consumer key as username and consumer secret as password for Basic Authorization in the wordpress admin section.
3. Username and Password were added in the playwright config file so user does not have to pass Basic auth in every test.
4. Design and execute multple tests for customer,product and order APIs of Claypot Store web application

Sample API Requests

Rest API documentation was followed to view,add,update and delete ClaypotStore products,orders and customers information.The documentation follows:

Documentation: Woocommerce Rest API
The following table has the sample APIs that are used to perform multiple API operations.

Descriptions	Http Methods	APIs
View All Customers	GET	http://localhost:10016/wp-json/wc/v3/customers
Update Customer	PUT	http://localhost:10016/wp-json/wc/v3/customers/:id
Create an Order	POST	http://localhost:10016/wp-json/wc/v3/orders
Delete a Order	DELETE	http://localhost:10016/wp-json/wc/v3/orders/:orderid?force=true
View Every Product	GET	http://localhost:10016/wp-json/wc/v3/products
View a Order	GET	http://localhost:10016/wp-json/wc/v3/orders/:orderid?force=true

After all the testing, the ClayPot Store website is launched in live version.

Allure Reporter

After completeing all the tests on playwright,third party reporter such as Allure is used to generated the test reports.

• Step 1: Installed "allure-playwright" module and allure command line
• Step 2: Add allure-playwright reporter with the destination folder to store allure reports in the playwright config file
• Step 3:Run the test using the below command:

  npx playwright test filename.spec.js

• Step 4: Generated Allure Reports:
  1) Run the below command in the command line:

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

  
  2) Open Allure Report:
  Use the below command
  

  npx allure-commandline open allure-report
  

Generated Allure Reports For:

1. Each module functional test
   
2. Smoke test
   
3. Full regression test
   
4. Compatibility test
   
5. Complete end to end test

Allure Report: Open [ClaypotStore Allure Report.mhtml]("https://github.com/nolakkapali/Woocommerce-plugin-Test-Playwright-Javascript/blob/main/ClaypotStore%20Allure%20Report.mhtml")