pw-react-educative-final.tar.gz

playwright

reactapp-playwright

reactapp-playwright-copy

This is the step-by-step guide to set up Playwright on educative. The course demonstrates the testing of web apps using Playwright. Playwright tests run on the published website as well as on the self-made web applications.

Docker Setup Guide for Playwright on Educative

## Introduction 
In this lesson, we will try to run the test file of Playwright boilerplate to see if it is working fine with our Docker image. 
We have already installed all the required dependencies in our Dockerfile. Now, we need to run the tests to check if our Dockerfile is working fine.

## Playwright Boilerplate Structure
Playwright boilerplate is available on Github at this link https://github.com/e2e-boilerplate/playwright-typescript-ts-jest-jest-expect.
We have renamed the folder ```playwright-typescript-ts-jest-jest-expect``` to ```playwright-master``` for ease. 

The test file ```sandbox.spec.ts``` is present inside the ```__tests__``` folder.

The directory structure can be understood with the help of the image given below.



### Test File
The [test file](https://github.com/e2e-boilerplate/playwright-typescript-ts-jest-jest-expect/blob/master/__tests__/sandbox.spec.ts) in the GitHub repository does not run in a headless mode that causes it to throw the following error.  

Hence, a minor change is needed in ```sandbox.spec.ts``` file to avoid this error while setting up the Playwright environment. 


We will set the headless mode to ```true``` in ```line 10``` of the [test file](https://github.com/e2e-boilerplate/playwright-typescript-ts-jest-jest-expect/blob/master/__tests__/sandbox.spec.ts) 
```
 : await chromium.launch({headless: true});
```




### Working Behind the Tests
The step by step guide for understanding the process happening behind the test in ```sandbox.spec.ts``` is given below. 

1. In ```line 1```, chromium is imported and is launched at ```line 9```.

2. In ```line 6```, a test suite is created, which is invoked when we run the command ```npm test```. 

3. In ```line 13```, a web page on which we are running our test is accessed. 
It consists of a single heading, as can be seen by going to the link https://e2e-boilerplate.github.io/sandbox/.





4. The test case starting from ```line 27``` is testing the title and the heading of the web app. 

5. Let's now run the tests. 

The tests can be run in the terminal. We will have to add a start script.

### Start Script

The start script consists of 3 commands.

1. ```cd playwright-master/__tests__```.  In the first step, we move to the tests folder where our test file is present. 

2. ```rm ._*```. This command is to remove all the extra files in case the Educative platform creates duplicate files.
Such files disturb the working of the project and throw random errors. 
> Note: In some cases, the Educative platform creates duplicate files starting with the prefix ```._``` that throws random errors. These files can be seen by using the following command in the terminal. 
```
ls -al 
```

An error thrown due to creating such a file in our project is shown in the figure below.







3. ```npm test``` or ```npm run test``` is used to run the test file present in the directory. 

>Note: it is not necessary to be in the ```__tests__``` folder to runs the test file. ```npm test``` run the tests even if you are present in the root directory.
<hr>

### Run the Tests 

# Introduction 
In this lesson, we will try to run the test file of Playwright boilerplate to see if it is working fine with our Docker image. 
We have already installed all the required dependencies in our Dockerfile. Now, we need to run the tests to check if our Dockerfile is working fine.

# Playwright Boilerplate Structure
Playwright boilerplate is available on Github at this link https://github.com/e2e-boilerplate/playwright-typescript-ts-jest-jest-expect.
We have renamed the folder ```playwright-typescript-ts-jest-jest-expect``` to ```playwright-master``` for ease. 

The test file ```sandbox.spec.ts``` is present inside the ```__tests__``` folder.

The directory structure can be understood with the help of the image given below.



## Test File
The [test file](https://github.com/e2e-boilerplate/playwright-typescript-ts-jest-jest-expect/blob/master/__tests__/sandbox.spec.ts) in the GitHub repository does not run in a headless mode that causes it to throw the following error.  

## Working Behind the Tests
The step by step guide for understanding the process happening behind the test in ```sandbox.spec.ts``` is given below. 

1. In ```line 1```, chromium is imported and is launched at ```line 9```.

2. In ```line 6```, a test suite is created, which is invoked when we run the command ```npm test```. 

3. In ```line 13```, a web page on which we are running our test is accessed. 
It consists of a single heading, as can be seen by going to the link https://e2e-boilerplate.github.io/sandbox/.





4. The test case starting from ```line 27``` is testing the title and the heading of the web app. 

5. Let's now run the tests. 

The tests can be run in the terminal. We will have to add a start script.

## Start Script

The start script consists of 3 commands.

1. ```cd playwright-master/__tests__```.  In the first step, we move to the tests folder where our test file is present. 

2. ```rm ._*```. This command is to remove all the extra files in case the Educative platform creates duplicate files.
Such files disturb the working of the project and throw random errors. 
> Note: In some cases, the Educative platform creates duplicate files starting with the prefix ```._``` that throws random errors. These files can be seen by using the following command in the terminal. 
```
ls -al 
```

An error thrown due to creating such a file in our project is shown in the figure below.







3. ```npm test``` or ```npm run test``` is used to run the test file present in the directory. 

>Note: it is not necessary to be in the ```__tests__``` folder to runs the test file. ```npm test``` run the tests even if you are present in the root directory.
<hr>

## Run the Tests 

Playwright Setup

Setting Up React App With Playwright

Playing With Playwright

Introduction

Playwright Boilerplate Structure

Test File

Working Behind the Tests

Start Script

Run the Tests