Test APIs in Playwright (Mock & Block)

   Perform following steps,

1. Add the request listener at the very top (before going to the page)
• page.on('request',request => {console.log(request.method(), request.url()) })
• This step is to find out requests in the page
• Similar to network tab in web developer tool of the browser
2. Keep the page alive untill all requests are done
• page.waitForLoadState('networkidle')
• This step to see all requests in the page
• Similar to network tab in web developer tool of the browser
3. Need route function to mock it
• page.route('requestURL', (route) => {

route.fulfill({     // fulfill to mock data, usually GET

status: 200,    // this is the status code the API will get

contentType: 'application/json',    // should be similar as it expected

body: JSON.stringify(mock_json_data_object)

}) 

})

• Usefull for negative test cases
• Usefull for testing micro-services

      4. Need route function to block it

• page.route('**/*', (route) => { //URL is regular expression to match all

if (route.request().resourceType() === 'image'){    //request for images

return route.abort()}  //aborting image requests

return route.continue()    // continue if not image request

}) 

})

• Usefull to speed up test process

Test APIs in Playwright (API in E2E test)

 Perform following steps,

1. Import {APIRequestContext} from '@playwright/test'
2. Declare a variable to get the API context
• let apiContext: APIRequestContext;
3. User before all to initialize the API context

• test.beforeAll (async ({ playwright } )=> { 

  apiContext = await playwright.request.newContext({ 

  baseURL: 'api.base.URL', 

  extraHTTPHeaders: { 

  'Accept': 'application/json', 

  'Content-Type': 'application/json', 

  } 

  }) 

  })

4. Destroy the context after all

• test.afterAll ( async ({ }) => { 

  await apiContext.dispose(); 

  })

5. Make request in test as required
• await apiContext.post('URL', {data: payLoad})

Test APIs in Playwright (with E2E tests)

 Perform following steps,

1. In playwright.cofig.ts, create a project
• Provide test name:
• Provide testDir:
• In use:
• Provide baseURL:
• Provide extraHTTPHeaders:
• 'Accept':
• 'Content-Type':
2. In test, call back request instead of page
3. In request.METHOD('URL')
• request.get('URL')
• request.post('URL', {body})
4. Get the response in a variable
• const response = request.get('/products')
• For status, response.status()
• For header, response.headers()
• For body, response.body()
• For JSON, response.json()
• Also others availble
5. For assertions, use expect
• For status, expect(response.status()).toBe(200)
• For header content type match
• expect(response.headers()['conten-type']).toContain('application/json')
6. Get the response body in a variable
• const responseBody = response.json()
7. For assertions in the body
• expect(responseBody).toHaveProperty('success', true)
• expect(responseBody).toHaveProperty('data')
• expect(Array.isArray(responseBody.data)).toBe(true)
8. Run test project-wise, run with the following command
• npx playwright test --project project_name_given_playwright.config

Reuse authenticated browser state for others tests in Playwright

 Perform following steps,

1. Create folder playwright/.auth outside tests
2. Create folder setup inside tests
3. Create a test file inside setup folder "file_name.setup.ts"
1. Read userID and password from a file
2. Login and write the storage state in user.json file
• File directory will be "playwright/.auth/user.json"
3. await page.context().storageState({path: above_dir_path_var})
4. Create a project in playwright.config.ts
• { name: 'auth-setup', testMatch: 'ts_file_name_of_auth_setup' }
5. Add dependency and storage state in working project(s)
• use: { ..., storageState: 'directory_of_user.json' }, dependencies: ['name_of_auth_project']

Read from file and write to file

 Perform following steps,

1. import path from 'path';
• Need for path of files in order to access them
2. import fs from 'fs';
• Need for read and write on files
3. In order to read or write, first we need to resolve the directory of the file
• path.resolve(__dirname, 'directoryPath')
4. For reading, need to parse before read (reading JSON file)
• JSON.parse(fs.readFileSync(dirVar,'utf-8'))
5. For writing, need to join the file name with directory (writing JSON file)
• fs.writeFileSync( join(dirVar, 'filename'), JSON.stringify(contentVar) )

MailSlurp configuration in order to test authentication flow

 Perform following steps,

1. Create an account in mailslurp.com
2. Go to Dashboard -> Developers
3. Get the API access key
4. Install the mailslurp client in the project
• npm i --save mailslurp-client
5. Create an environment file (if not created already)
6. Create a new environment varriable in the ".env" (convension is to user all uppercase letters)
7. Assign the mailslurp API access key value for the environment varriable
8. Add the ".env" file in ".gitignore"
9. Playwright run extension in VSCode does not read from the ".env" file. So in order to make it work we need to do followings
1. Create a ".vscode" folder
2. Create a file called "settings.json" (beware of typos)
3. In the file create a entry for playwright environment\
4. Assign the API access key value here
10. Create a "utils" folder inside the "tests" folder
11. Create a file called "email-utils.ts" in the folder
12. Paste the mailslup code (javascript) provided and save
• In the code a inbox is created with defaults
• Do not forget to return the inbox at last, in order to use it
13. Create a new test in playwright
• import from utils
• create inbox
• console log the inbox (to verify its working)

Start with Playwright (TypeScript)

 Perform following steps to start,

1. Create a new folder
2. Open terminal in that folder
3. Enter command "npm init playwright@latest"
4. Go through the selection as required
5. Remember to choose TypeScript when presented
6. From VSCode remove test example folder
7. Remove example spec file
8. Update the playwright configuration file
• base URL
• project
• headless
9. Create a new test.spec.ts file inside the tests folder (if tests folder is selected)
10. Start the spec file with import
• import {test, expect} from '@playwright/test'
11. Start test function with callback

test ( 'Test case name', async({ page }) => {

 // your test actions and assertions

})

Another fun cases to automate in Wordpress

 TC1: Validate all plans in plan and pricing page

• Go to plan and pricing page
• Validate availability of Personal plan
• Validate availability of Premium plan
• Validate availability of Business plan
• Validate availability of eCommerce plan
• Validate availability of Configure plan

TC2: Validate login functionality

• Go to login page
• Read username and password from a text file
• Enter username and password
• Validate successful login attempt

TC3: Validate logout functionality

• Go to profile page
• Try to logout 
• Validate successful logout attempt

tfw_play.robot (Robot test suite file)

• Add resource files
• Configure suite setup and teardown
• Perform TC1, TC2 and TC3

tfw_initial.robot (Robot resource file)

• Provide site URL
• Open browser
• Set selenium times
• Maximize window size

tfw_header_bar.robot (Robot resource file)

• Get all locators
• Navigate menu links

tfw_plan_price_page.robot (Robot resource file)

• Get all plan type locators
• Validate presence of different types of plans in the page

tfw_login_page.robot (Robot resource file)

• Get all locators
• Read username and password from text files
• Provide username and password and try to login

tfw_loggedin_page.robot (Robot resource file)

• Get locators
• Verify successful login attempt
• Try to logout

tfw_loggedout_page.robot (Robot resource file)

• Get locators
• Verify successful logout attempt

user_name.txt (Text file to read)

• Provide username

user_password.txt (Text file to read)

• Provide password

Git repository link: https://github.com/wasiqul

A fun case to automate cont.

A few month earlier I wrote an automation script in Robot framework which will go to bongobd and navigate to a specific section and play a video. Few days ago I tried to run it and found out it is failing. Upon further investigation I realize the whole section is removed from the site thus the locator is not able to find it and the whole case is failing. I decide to fix it to run it again.

When I was fixing it I feel the need to validate all category pages first so that I can find it in advance if any sections are missing or updated. Then search for the same video and play it. While updating I feel the need to redesign the code for the ease of maintenance, reusability and better understanding. So I decided to go for page object modelling (POM).

In order to design it in POM first I investigate which parts of the website is remaining the same across all pages so I can model them as page objects. Find out header navigation bar and footer are always remaining the same. So, created headerBar.robot and footer.robot objects.

After that as I am interacting with the search result page, I created another object called searchResult.robot and all my test cases were listed in bongo.robot like before. And also make sure that all validations are done here and no where else.

Project was running fine and notice that some actions need to taken at start and writing those action in test case file does not feel right to me. So, I created another object called initial.robot and call it upon setup. And put all locators and inputs in variable so future updates will be easy.

I know that there is still room for improvement but still I am satisfied with all changes I have done. I think it is much more maintainable and reusable than before.

Here is the git hub repository link,

github.com/wasiqul/robotframework_bongobd

What is testing? And how I test?

Akash Saha (Software QA professional) : 

In My opinion, when a person checks the usability,functionalities and components of a product before or after using it can be referred as testing. 

I always check if the product has the utilizable features for using it without any kind complications. If the outcome is not satisfactory users will not accept it positively. So,assuring the grade and quality as per requirements is my main goal in the process of testing. 

Shounak Banik (Software QA professional):

From my point of view, testing is to find out the progress of the execution of different components of a system. 

Firstly, I gather knowledge regarding feature which I am going to be tested. Secondly, I make strategy so that any of patterns of testing the feature will not be missed. Lastly, I start testing according to the checkpoints/ strategies those I make for testing. 

Wasiqul Huq (Software QA professional): 

Testing is learning with an objective. The objective can vary depending upon goal. Sometime we test to validate, sometime we test to choose, sometime we test to take a decision. 

I conduct experiments with test environment, test data and test cases. My experiment results guide me towards my objective. If my objective is to validate than I validate against requirement or industry standards. If my objective is to choose one solution among others than i compare and choose which will fit my purpose. If my objective is to take decision than I write down case details so I and others can judge my decision taken.

Saika Shahnaj (Software QA professional): 

I think testing is the combination of some process and steps that a tester need to follow to ensure a flawless system which meets the business and system requirements to fulfill clients’ satisfaction. 

When I test any system or specific module, at the very first I try to go through the requirements and understand each of the words. Then prepare a list of test cases that I can follow for a complete testing. The team discussion also helps a lot to resolves the confusions during test run.

Imran Khaled (Software QA professional): 

To me testing is setting up a standard which a client urges the most.

First of all, when I am assigned a feature or module to test I go through the documentation to understand the requirements. Then I plan out the testing in a way so that it meets all the requirements mentioned in the documentation. After planning I discuss the plan with manager to make sure I am not missing out on any scope of the documentation. This is the process of testing I go through while testing a module.