Say Hello to Playwright
Tags: playwright, javascript, testing, tutorial
Published: 2020-12-16 12:35:01

Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. It is a Node library to automate chromium, firefox and webkit with a single API. It is developed by Microsoft and is open source.

And guess what? It is developed by the same team that developed Puppeteer. So Playwright offers everything that puppeteer did plus a lot more - it supports all popular browsers, the API is testing friendly, provides lean parallelization with browser context - to mention a few. The team says they have incorporated the lessons learned from Puppeteer, which says a lot about the tool. 

---
<p>
> <mark>I have recently published a full course on Playwright: </mark> 
[Web Automation and Testing using Playwright](https://www.udemy.com/course/playwright/?couponCode=EARLY_BIRD) (*This is a limited time discount link*) 
<p>

-----


### Table of Contents <a name="toc"></a>
   * [Why Playwright](#WhyPlaywright)
   * [Playwright Installation] (#PlaywrightInstallation)
   * [Core Concepts] (#CoreConcepts)
   * [Basic Script] (#BasicScript)
   * [Playwright API] (#PlaywrightAPI)
      * [Navigation] (#Command_1)
      * [Identifying Web Elements] (#Command_2)
      * [Interacting with Web Elements] (#Command_3)
   * [End-to-End Testing with Playwright] (#Testing)

---

#Why Playwright <a name="WhyPlaywright"></a>

Here are some reasons why you should consider Playwright:
- Support for all browsers and both headful and headless modes
- Supports multiple languages- JavaScript, TypeScript, Python, C# and Go
- Fast and reliable execution
- Powerful automation capabilities that support modern web features
- Run multi-page emulation scenarios
- Integrates with your workflow 

{% youtube 4xx4ifL5s3A %}

[Back to table of contents](#toc)

---

#Playwright Installation <a name="PlaywrightInstallation"></a>

Playwright has a one-step-setup. The following command will install Playwright in your project: 

`npm install playwright`

{% youtube C3RCPEXqqIk %}

[Back to table of contents](#toc)

---

#Core Concepts <a name="CoreConcepts"></a>

###Browser Type
A browserType needs to be selected. The browserType could be chromiun, firefox or webkit.
```JavaScript
const { firefox } = require('playwright');
```

###Browser Instance
Using the browserType's launch method, create a browser instance of that browserType.
```JavaScript
const browser = await firefox.launch();
```

###Browser Context
Then start a new browser context. Browser Contexts provide a way to operate multiple independent browser sessions. 
```JavaScript
const context = await browser.newContext();
```

### Page
Using this context create pages. A page is essentially a tab in the browser or a pop up window. Multiple pages can be created using a single browser context.
```JavaScript
const page = await context.newPage();
```
Page provides methods to interact with the elements on the page.

Finally, close the browser instance.
```JavaScript
await browser.close();
```

{% youtube kdF0OqlOz-0 %}

[Back to table of contents](#toc)

---

#Basic Script <a name="BasicScript"></a>

Here is a basic Playwright script that opens a firefox browser, navigates to example.com and then closes the browser instance:

```JavaScript
const { firefox } = require('playwright');
(async () => {
   const browser = await firefox.launch();
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto('https://example.com')
   await browser.close();
})() 
```

{% youtube SSbZL96nb9Q %}

[Back to table of contents](#toc)

---

#Playwright API <a name="PlaywrightAPI"></a> 

Playwright API provides various methods to perform operations like navigating to a webpage, identifying and interacting with web elements and so on.

### Navigation <a name="Command_1"></a>
Here are the most commonly used navigation related methods:
```JavaScript
// Navigate to a specific url
await page.goto(url)

// Go back in browser's history
await page.goBack()

// Go forward in browser's history
await page.goForward()

// Reload a page
await page.reload()
```

### Identifying Web Elements <a name="Command_2"></a>
Identifying web elements is critical to any web automation tool. Playwright provides two methods to identify elements.

```javascript
// Find an element matching the specified selector
await page.$(selector)

// Find all elements matching the specified selector
await page.$$(selector)
```

The selector could be a CSS selector, XPath selector, HTML attribute or text content. Understanding how to efficiently and uniquely identify your elements in an art that must be mastered to produce reliable scripts. The full course on Playwright will help you become better at it. Again, here is the limited time discount link for the course: [Web Automation and Testing using Playwright](https://www.udemy.com/course/playwright/?couponCode=EARLY_BIRD)

### Interacting with Web Elements <a name="Command_3"></a>
Here are the methods for the most commonly used interactions with web elements:

```javascript
// Click on an element
await page.click(selector)

// Input some text
await page.fill(selector, value)

// Check a checkbox
await page.check(selector)

// 'Uncheck a checkbox
await page.uncheck(selector)

// Focus on an element
await page. focus(selector)
```

Each of these methods have some optional parameters and there are many more methods for interacting with web elements. 


[Back to table of contents](#toc)

---

# End-to-End Testing with Playwright <a name="Testing"></a>

You can plug-in popular JavaScript test runners with Playwright. You can use Jest/Jasmine, AVA or Mocha.

[Jest-Playwright](https://github.com/playwright-community/jest-playwright) is especially popular for writing tests.

Here is a sample test:
```JavaScript
beforeAll(async () => {
  await page.goto('https://whatismybrowser.com/')
})

test('should display "google" text on page', async () => {
  const browser = await page.$eval('.string-major', (el) => el.innerHTML)
  expect(browser).toContain('Chrome')
})
```

jest-playwright is a powerful framework to use to write tests. 



[Back to table of contents](#toc)

---

<p>
> <mark> Full course on Playwright: </mark>
[Web Automation and Testing using Playwright](https://www.udemy.com/course/playwright/?couponCode=EARLY_BIRD) (*This is a limited time discount link*) 
<p>

---