如何：使用 Playwright 与滑块交互

Question

我所期望的 我尝试与基于角度的网页上的滑块 ui 元素进行交互。下面显示的代码不再与有问题的元素交互。曾经有一段时间..

更多信息

阅读提到的“空白”问题，这称为“视图跟踪”。我不能 100% 确定这与该问题有关。

我尝试过的

我在与使用 Angular 构建的网页上的滑块交互时遇到问题。通过我目前的解决方案

 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 });

  }
}

实际发生了什么/结果

剧作家正在点击屏幕的右上角，在网页之外的这个奇怪的“额外空白区域”..让我觉得元素的边界框已损坏/未附加到 DOM？

有人可以提供“单击并拖动”或“与滑块交互”的更新实现吗？到目前为止我遇到的一切都不起作用。

Answer 1

也许它可以使用滑块的宽度而不是相对于框的视口位置来解决您的问题？我不知道你的滑块是什么样子，所以我对用 Angular 编写的通用滑块进行了测试，它似乎按预期拖动滑块：

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()

})