Match Dblclick with Playwright's behavior

[ankur22]

TODO:

xk6-browser docs imply that this dblclick issue is about locators, however, it's the behavior in our extension in general.

---

Tested against: dbede12

The method dblclick on locator only clicks once.

In the below code it works against localhost:8080, which is a test server that can be found here with instructions on how to run it locally: https://github.com/ankur22/testserver.

import { sleep } from 'k6';
import { chromium } from 'k6/x/browser';

export default function () {
  const browser = chromium.launch({
    headless: false,
  });
  const context = browser.newContext();
  const page = context.newPage();
  const res = page.goto('https://test.k6.io/browser.php');
  const l = page.locator('#counter-button');
  sleep(1);
  l.dblclick();

  sleep(10);
  browser.close();
}

I was expecting the counter on this test page to go up to 2 but it only went up to 1. When testing with PW i was able to get the expected count of 2.

Tasks

Beta Give feedback

1. FIx issue -- Fix dblClick #1121
2. Add to release notes -- Add various browser module changes k6#3506
3. Docs update -- Update browser module dblclick docs k6-docs#1456

[imiric]

Nice catch!

It doesn't seem related to Locator, but to ElementHandle:

xk6-browser/common/element_handle.go

Lines 242 to 244 in dbede12

	func (h *ElementHandle) dblClick(p *Position, opts *MouseClickOptions) error {
	return h.frame.page.Mouse.click(p.X, p.Y, opts)
	}

It should call Mouse.dblClick() 😄

[inancgumus]

@ankur22 Thanks Ankur for helping me find the problems in the locator tests 🙇

@imiric No, it's not because of not calling Mouse.dblClick. Because some locator tests are incorrect 🤦 I'll send a PR.

Ankur, shouldn't the server needs to listen for the dblclick event here instead of the click event? I've changed it to dblclick and it worked.

I've then used the click() method in the script instead (while the server listens for the dblclick event). Expectedly, it did nothing (fortunately!). This validates that our dblclick() works.

[ankur22]

@inancgumus I wasn't clear in the original description. The dblclick action in xk6-browser doesn't match the behaviour in playwright.

Playwright script:

const { test, chromium } = require('@playwright/test');

test.describe('Editing', () => {
  test('Type login creds', async () => {
    const browser = await chromium.launch({ headless: false });
    const ctx = await browser.newContext();
    const page = await ctx.newPage();
    await page.goto("https://test.k6.io/browser.php");
    const l = page.locator('#counter-button');
    await new Promise(resolve => setTimeout(resolve, 1000));
    l.dblclick();

    await new Promise(resolve => setTimeout(resolve, 10000));

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

The outcome is that the counter on the test page is 2. Whereas the xk6-browser test script (now amended in the original description) results in 1.

I'm not sure what you mean here, could you elaborate a bit?:

Ankur, shouldn't the server needs to listen for the dblclick event here instead of the click event? I've changed it to dblclick and it worked.

I've then used the click() method in the script instead (while the server listens for the dblclick event). Expectedly, it did nothing (fortunately!). This validates that our dblclick() works.