How to execute HTML Document Methods in Playwright

This article will discuss how we can execute the HTML document methods in Playwright. You can find the list of HTML Document methods here.

1. Extract the Inner text of the element and then assert it.

1
2
3
4
5
6
7

test('Extract innerText and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/')
var locator = await page.evaluate(
() => document.querySelector('h1').innerText
)
await expect(locator).toEqual('Welcome to the-internet')
})

2. Get the current URL of the webpage and then assert it.

1
2
3
4
5
6

test('Get the current URL and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/')
await page.locator('text=A/B Testing').click()
var url = await page.evaluate(() => document.URL)
await expect(url).toEqual('https://the-internet.herokuapp.com/abtest')
})

3. Get the count of the total number of images on the webpage and then assert it.

1
2
3
4
5

test('Count the total number of images and assert', async ({page}) => {
await page.goto('https://pixabay.com/')
var length = await page.evaluate(() => document.images.length)
await expect(length).toEqual(37)
})

4. Get the HTML tag name of the element and then assert it

1
2
3
4
5
6
7

test('Get the Tag Name and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/login')
var tagName = await page.evaluate(
() => document.getElementById('username').tagName
)
await expect(tagName).toEqual('INPUT')
})

Upon Executing all the tests, we should get a pass.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import {test, expect} from '@playwright/test'

test.describe('Example to demonstrate execution of HTML Document methods in Playwright', () => {
test('Extract innerText and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/')
var locator = await page.evaluate(
() => document.querySelector('h1').innerText
)
await expect(locator).toEqual('Welcome to the-internet')
})

test('Get the current URL and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/')
await page.locator('text=A/B Testing').click()
var url = await page.evaluate(() => document.URL)
await expect(url).toEqual('https://the-internet.herokuapp.com/abtest')
})

test('Count the total number of images and assert', async ({page}) => {
await page.goto('https://pixabay.com/')
var length = await page.evaluate(() => document.images.length)
await expect(length).toEqual(37)
})

test('Get the Tag Name and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/login')
var tagName = await page.evaluate(
() => document.getElementById('username').tagName
)
await expect(tagName).toEqual('INPUT')
})
})