Typescript 如何使用 puppeteer 操作 matslider 值

我正在try 用puppeteer以编程方式更改垫子滑块值，但我无法使其工作.

这就是我try 过的:

async function changeSliderValue(page:Page){
    try {
        const thumb = await page.$('.mat-slider-thumb'); 
        const position = await thumb.boundingBox();
        await page.mouse.move(position.x, position.y);
        await page.mouse.down();
        await page.mouse.move(position.x + 100, position.y);
        await page.mouse.up();
    } catch (error) {
        console.log(error);
    }
}

但是拇指位置/滑块的值不会改变.

你能建议一个更好的方法吗？

这是滑块:

<mat-slider _ngcontent-c28="" class="scale-slider mat-slider mat-accent mat-slider-horizontal" max="100" min="1"
    name="scale" role="slider" step="1" tabindex="0" aria-disabled="false" aria-valuemax="100" aria-valuemin="1"
    aria-valuenow="28.000000000000004" aria-orientation="horizontal"
    style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <div class="mat-slider-wrapper">
        <div class="mat-slider-track-wrapper">
            <div class="mat-slider-track-background" style="transform: translateX(0px) scaleX(0.727273);"></div>
            <div class="mat-slider-track-fill" style="transform: translateX(0px) scaleX(0.272727);"></div>
        </div>
        <div class="mat-slider-ticks-container" style="transform: translateX(0%);">
            <div class="mat-slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%);">
            </div>
        </div>
        <div class="mat-slider-thumb-container" style="transform: translateX(-72.7273%);">
            <div class="mat-slider-focus-ring"></div>
            <div class="mat-slider-thumb"></div>
            <div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">28.000000000000004</span>
            </div>
        </div>
    </div>
</mat-slider>