How To Interact With Sliders Using Playwright

Sometimes, you need to deal with sliders in your tests. Playwright does not have any built-in tools to interact with sliders. However, it is not a problem at all.

In this guide, you will learn how to interact with sliders in Playwright.

Let’s start by adding a simple slider element to our page using the setContent() method, which internally calls document.write() and adds anything you want in the DOM.

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

let page: Page;


const sliderHTML = `<div>
    <p><input type="range" id="slider" min="0" max="100"/></p>
</div>`

test('Slider test', async ({page}) => {
  await page.setContent(sliderHTML);
});

In this case, all you get is the simple range slider on the page.

I suggest making the task more complicated and setting the slider value random. This makes us consider how to interact with the slider depending on its value.

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

let page: Page;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const sliderHTML = `<div>
    <p><input type="range" id="slider" min="0" max="100" value="${getRandomInt(0, 100)}"/></p>
</div>`

test('Slider test', async ({page}) => {
  await page.setContent(sliderHTML)…