[BUG?] Mouse actions produce different result depending on slowMo setting

Context:

• Playwright Version: 1.10.0
• Operating System: MacOS 11.2.3 (20D91)
• Node.js version: 15.11.0
• Browser: Chromium, Firefox

Code Snippet

PW Code

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false,
    //slowMo: 100,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setViewportSize({
    width: 1200,
    height: 1200,
  });

  await page.goto('https://bit.ly/3nbZ1wJ');

  // cookie consent tool
  await page.click('text=Nein, Danke');

  // move left slider to the right
  const leftSlider = await page.$(
    '[role="slider"]:above(:text("6.000 €")):left-of(:text("50.000"))'
  );
  const boxLeftSlider = await leftSlider.boundingBox();
  await page.mouse.move(
    boxLeftSlider.x + boxLeftSlider.width / 2,
    boxLeftSlider.y + boxLeftSlider.height / 2
  );
  await page.mouse.down();
  await page.mouse.move(boxLeftSlider.x + 100, boxLeftSlider.y);
  await page.mouse.up();

  // move right slider to the right
  const rightSlider = await page.$(
    '[role="slider"]:above(:text("84 Monate")):right-of(:text("50.000"))'
  );
  const boxRightSlider = await rightSlider.boundingBox();
  await page.mouse.move(
    boxRightSlider.x + boxRightSlider.width / 2,
    boxRightSlider.y + boxRightSlider.height / 2
  );
  await page.mouse.down();
  await page.mouse.move(boxRightSlider.x + 100, boxRightSlider.y);
  await page.mouse.up();

  //await browser.close();
})();

Describe the bug

If I run the above code w/o slowMo (like I usually do), at the end of the execution the left slider is moved (back) to the left, which is not wanted / expected (and for which there is no corresponding code IMHO). In this case the graphical result looks like this (amount for “Kreditwunsch” set to 6.000 EUR):

However, if I run the above code w/ slowMo (at least 50 or so) enabled, I get the wanted/expected result, i.e. that both sliders are only moved to the right, resulting in this graphical state:

Side issue Although not directly related, I’ve got another issue with the above code. Every now and then I get the following error when executing it:

const boxLeftSlider = await leftSlider.boundingBox();
TypeError: Cannot read property 'boundingBox' of null

Which means to me that

  const leftSlider = await page.$(
    '[role="slider"]:above(:text("6.000 €")):left-of(:text("50.000"))'
  );

obviously sometimes leads to a null reference getting assigned to leftSlider. I am only a JS/TS beginner… is my code wrong? Or does this happen whenever the page does not render fast enough? And if my code is fine, is there a clean way to avoid getting this error (i.e. without using explicit wait’s or something similar)?

[aslushnikov]

Hey @klhex, sorry for the wait! It took us awhile.

It looks like the reason for the weird behavior you see is the website itself. Here’s what we discovered:

• Each time you move first slider, the radio buttons are disabled, and then re-enabled after some time
• If you try moving second slider while the radio buttons are disabled, the first slider is reversed

With these observations in place, we added the following 2-lines to wait for the radio button to be enabled after you touched the first slider:

const radioButton = await page.$('#target-term-radio');
await radioButton.waitForElementState('enabled');

And the whole snippet would look like this:

const { chromium } = require('playwright');
const { installMouseHelper } = require('./install-mouse-helper');

(async () => {
  const browser = await chromium.launch({
    headless: false,
    //slowMo: 100,
  });
  const context = await browser.newContext({
    bypassCSP: true,
  });
  const page = await context.newPage();
  page.on('console', console.log);
  installMouseHelper(page);
  await page.setViewportSize({
    width: 1200,
    height: 1200,
  });

  await page.goto('https://bit.ly/3nbZ1wJ');

  // cookie consent tool
  await page.click('text=Nein, Danke');

  // move left slider to the right
  const leftSlider = await page.$(
    '[role="slider"]:above(:text("6.000 €")):left-of(:text("50.000"))'
  );
  const boxLeftSlider = await leftSlider.boundingBox();
  console.log(JSON.stringify(boxLeftSlider));
  await page.mouse.move(
    boxLeftSlider.x + boxLeftSlider.width / 2,
    boxLeftSlider.y + boxLeftSlider.height / 2,
  );

  await page.mouse.down();
  await page.mouse.move(boxLeftSlider.x + 100, boxLeftSlider.y + boxLeftSlider.height / 2);
  await page.mouse.up();

  /* !!! IMPORTANT !!! */
  const radioButton = await page.$('#target-term-radio');
  await radioButton.waitForElementState('enabled');
  /* ----------------- */

  // move right slider to the right
  const rightSlider = await page.$(
    '[role="slider"]:above(:text("84 Monate")):right-of(:text("50.000"))'
  );
  const boxRightSlider = await rightSlider.boundingBox();
  await page.mouse.move(
    boxRightSlider.x + boxRightSlider.width / 2,
    boxRightSlider.y + boxRightSlider.height / 2,
  );
  await page.mouse.down();
  await page.mouse.move(boxRightSlider.x + 100, boxRightSlider.y + boxRightSlider.height / 2);
  await page.mouse.up();

  //await browser.close();
})();

Hope this helps!

[aslushnikov]

PS. The mouse-helper tool that you use in the above code for debugging purposes only works on my side after renaming page.evaluateOnNewDocument() to page.addInitScript() in install-mouse-helper.js.

Oh yes, nice catch 😃