How to manipulate mat-slider value using puppeteer-CodePudding

I am trying to change a mat-slider value programmatically with puppeteer but I can't get it to work.

This is what I have tried:

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

but the thumb position/slider value doesn't change.

Can you suggest a better way?

This is the slider:

<mat-slider _ngcontent-c28=""  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 >
        <div >
            <div  style="transform: translateX(0px) scaleX(0.727273);"></div>
            <div  style="transform: translateX(0px) scaleX(0.272727);"></div>
        </div>
        <div  style="transform: translateX(0%);">
            <div  style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%);">
            </div>
        </div>
        <div  style="transform: translateX(-72.7273%);">
            <div ></div>
            <div ></div>
            <div ><span >28.000000000000004</span>
            </div>
        </div>
    </div>
</mat-slider>

CodePudding user response：

Here's my demo on Angular Material Slider

const puppeteer = require("puppeteer");

(async function main() {
  try {
    console.log("launching");
    const browser = await puppeteer.launch({
      headless: false
    });
    const page = await browser.newPage();
    await page.goto(
      "https://material.angular.io/components/slider/overview",
      {
        waitUntil: "networkidle2"
      }
    );

    const cookieBtnSelector =
      "body > material-docs-app > app-cookie-popup > div > div > button";

    await page.click(cookieBtnSelector);

    const sliderSelector =
      "#slider-overview > div > div.docs-example-viewer-body.ng-star-inserted > slider-overview-example > mat-slider > div";
    await page.waitForSelector(sliderSelector);

    const sliderElement = await page.$(sliderSelector);
    const pos = await sliderElement.asElement().boundingBox();

    const percentage = 90; // adjust slider percentage;

    await page.mouse.click(
      pos.x   percentage * (pos.width / 100),
      pos.y
    );
  } catch (e) {
    console.log("our error", e);
  }
})();