[BUG?] Mouse actions produce different result depending on slowMo setting #6264
Description
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 nullWhich 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)?