Playwright Automation

A boilerplate framework that helps you to write automation tests for UI, REST API, GraphQL and Visual E2E.

Table of contents

• Installing Dependencies

• Utilities

• POM

• Fixtures

• Specs

• Execution

• Docker

• Reporting

• CI

• Update Snapshots

Installing Dependencies

(Back to top)

1. Clone the Github repository

git clone https://github.com/jeeshan12/PlaywrightAutomation.git

2. Run below command in terminal to install the node dependencies locally

npm ci

Utilities

(Back to top)

Custom utility for GraphQL

performGraphQLOperation(apiRequestContext: APIRequestContext, graphQLOptions: GraphQLOptions, testInfo: TestInfo)

Params Description

• apiRequestContext: This API is used for the Web API testing. This is passed as a fixture to this method call.

• testInfo: It provides information about currently running test. This is used to attach additional details to the report.

• graphQLOptions: This is an interface GraphQLOptions which provides strutcure to our Graphql query options.

graphQLOptions: GraphQLOptions

export interface GraphQLOptions extends ReportOptions{

url: string;

query: string;

queryVariables?: { [key: string]: string | number | boolean };

headers?: { [key: string]: string };

}

ReportOptions is common interface to all API calls.

export interface ReportOptions {
attachRequestToReports?: boolean;
attachResponseToReports?: boolean;
}

| options | description | required | | :---: | :-: | :-: | | query | graphqlQuery | Y | | queryVariables | graphqlVariables | N (optional) | | url | endpoint | Y | | headers | headers to pass for request| N (set to "Content-Type": "application/json" Accept: "application/json"by default) (optional) | | attachRequestToReports | Attach request to the reports | N| | attachResponseToReports | Attach response to the reports | N |

Custom utility for Rest API

performGetOperation(apiRequestContext: APIRequestContext, testInfo: TestInfo, getOptions: GetMethodOptions)

Params Description

• apiRequestContext: This API is used for the Web API testing. This is passed as a fixture to this method call.

• testInfo: It provides information about currently running test. This is used to attach additional details to the report.

• getOptions: This is an interface GetMethodOptions which provides strutcure to our Rest API call.

getOptions: GetMethodOptions

export interface GetMethodOptions extends ReportOptions {
url: string;
headers?: { [key: string]: string };
params?: { [key: string]: string | number | boolean };
}

| options | description | required | | :---: | :-: | :-: | | url | endpoint | Y | | headers | headers to pass for request| N (set to "Content-Type": "application/json" Accept: "application/json"by default) (optional) | | params | query params | N (optional) |

performPostOperation(apiRequestContext: APIRequestContext, testInfo: TestInfo, postOptions: PostMethodOptions)

Params Description

• apiRequestContext: This API is used for the Web API testing. This is passed as a fixture to this method call.

• testInfo: It provides information about currently running test. This is used to attach additional details to the report.

• postOptions: This is an interface PostMethodOptions which provides strutcure to our Rest API call.

postOptions: PostMethodOptions

export interface PostMethodOptions extends ReportOptions {

url: string;

headers?: { [key: string]: string };

params?: { [key: string]: string | number | boolean };

data?: string | Buffer | Serializable;

form?: { [key: string]: string | number | boolean };

multipart?: {

[key: string]:

| string

| number

| boolean

| ReadStream

| {

/**
* File name
*/

name: string;

/**
* File type
*/

mimeType: string;

/**
* File content
*/

buffer: Buffer;

};

};

}

| options | description | required | | :---: | :-: | :-: | | url | endpoint | Y | | headers | headers to pass for request| N (set to "Content-Type": "application/json" Accept: "application/json"by default) (optional) | | params | query params | N (optional) | | data | request body | Y (either one of three is required data, form or multipart)| | form | request form data | Y (either one of three is required data, form or multipart)| | multipart | request file upload data | Y (either one of three is required data, form or multipart)|

performPutOperation(apiRequestContext: APIRequestContext, testInfo: TestInfo, putOptions: PutMethodOptions)

Params Description

• apiRequestContext: This API is used for the Web API testing. This is passed as a fixture to this method call.

• testInfo: It provides information about currently running test. This is used to attach additional details to the report.

• putOptions: This is an interface PutMethodOptions which provides strutcure to our REST API call.

putOptions: PutMethodOptions

export interface PutMethodOptions extends ReportOptions {

url: string;

headers?: { [key: string]: string };

params?: { [key: string]: string | number | boolean };

data?: string | Buffer | Serializable;

form?: { [key: string]: string | number | boolean };

multipart?: {

[key: string]:

| string

| number

| boolean

| ReadStream

| {

/**
* File name
*/

name: string;

/**
* File type
*/

mimeType: string;

/**
* File content
*/

buffer: Buffer;
};

};

}

| options | description | required | | :---: | :-: | :-: | | url | endpoint | Y | | headers | headers to pass for request| N (set to "Content-Type": "application/json" Accept: "application/json"by default) (optional) | | params | query params | N (optional) | | data | request body | Y (either one of three is required data, form or multipart)| | form | request form data | Y (either one of three is required data, form or multipart)| | multipart | request file upload data | Y (either one of three is required data, form or multipart)|

performDeleteOperation(apiRequestContext: APIRequestContext, testInfo: TestInfo, deleteOptions: DeleteMethodOptions)

Params Description

• apiRequestContext: This API is used for the Web API testing. This is passed as a fixture to this method call.

• testInfo: It provides information about currently running test. This is used to attach additional details to the report.

• deleteOptions: This is an interface DeleteMethodOptions which provides strutcure to our REST API call.

deleteOptions: DeleteMethodOptions

export interface DeleteMethodOptions extends ReportOptions {

url: string;

data?: string | Buffer | Serializable;

form?: { [key: string]: string | number | boolean };

headers?: { [key: string]: string };

multipart?: {

[key: string]:

| string

| number

| boolean

| ReadStream

| {

name: string;

mimeType: string;

buffer: Buffer;

};

};

params?: { [key: string]: string | number | boolean };

}

| options | description | required | | :---: | :-: | :-: | | url | endpoint | Y | | headers | headers to pass for request| N (set to "Content-Type": "application/json" Accept: "application/json"by default) (optional) | | params | query params | N (optional) | | data | request body | N (optional)| | form | request form data | N (optional) | | multipart | request file upload data | N (optional)|

POM

(Back to top)

We will be using Page object Model and Page components to design our tests. Pages are maintained under pages folder and Page components are maintained under pagecomponents. To get more information on Page Object, refer to this beautiful article Page Object by Martin Fowler.

Fixtures

(Back to top)

Test fixtures are used to establish an environment for each test, giving the test everything it needs and nothing else. Test fixtures are isolated between tests. With fixtures, you can group tests based on their meaning instead of their standard setup. More information about fixtures can be found on official documentation here.

Here is another blog for Playwright fixtures.

Specs

(Back to top)

Specs are written under tests folder.

Rest API tests can be found under tests/api folder.

GraphQL tests can be found under tests/api folder.

Web tests can be found under tests/web folder.

Visual tests can be found under tests/web folder. While writing the visual tests, don't forget to add @visual tag. As this is used to differentiate between normal web tests and visual tests. We will be using **g