Search code examples
playwrightuisliderbrowser-automationplaywright-typescript

How to: Interact with a slider using Playwright

What I expected I am attempting to interact with a slider ui element on my angular based webpage. The code shown below is not interacting with the elements in question anymore. It was at one point..

More Info

Reading on the "white-space" issue mentioned, this is called "view-trailing". I am not 100% sure this relates to the issue.

What I have tried

I am having issues interacting with a slider on a webpage built with angular. Through my current solution

 async slideToAgree() {
    const { page } = this

    const {
      width: sw,
      height: sh,
      x: sx,
      y: sy
    } = await (await page.$('.slider-controller')).boundingBox();

    const { width: tw, x: tx } = await (
      await page.$('.slider-container')
    ).boundingBox();

    await page.mouse.move(sx + sw / 2, sy + sh / 2);
    await page.mouse.down();
    await page.mouse.move(tx + tw, sy + sh / 2, { steps: 10 });

  }
}

What actually happened / result

Playwright is clicking on the top right of the screen, outside of the webpage in this strange "extra white space".. making me think the bounding box for the element is broken / not attached to the DOM?

Can someone please provide an updated implementation of "Click and drag" or "interacting with a slider"? Nothing I have ran into so far has worked.

Solution

  • Maybe it will solve your problem using the width of the slider instead of the relative to viewport position of the box? I don't know how your slider looks like, so I tested against a generic slider written in Angular and it seems to drag the slider as intended:

    import {test} from '@playwright/test'

test('Move slider', async ({ page, context }) => {

    await page.goto('https://material.angular.io/components/slider/examples')
    const sliderTrack = await page.locator('.mdc-slider__track').first()
    const sliderOffsetWidth = await sliderTrack.evaluate(el => {
        return el.getBoundingClientRect().width
    })

    // Using the hover method to place the mouse cursor then moving it to the right
    await sliderTrack.hover({ force: true, position: { x: 0, y: 0 } })
    await page.mouse.down()
    await sliderTrack.hover({ force: true, position: { x: sliderOffsetWidth, y: 0 } })
    await page.mouse.up()

})