microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
64.19k stars 3.49k forks source link

[Bug]: Unselect isn't recorded by codegen #31290

Open mtsmfm opened 1 month ago

mtsmfm commented 1 month ago

Version

1.44.1

Steps to reproduce

  1. $ npx playwright codegen https://html-preview.github.io/\?url\=https://gist.githubusercontent.com/mtsmfm/a57f12f80fbfbda30ebec8790d760610/raw/002585795a6c1ef5a9f450b386db3618c1c2e8dc/multiselect.html
  2. Click "Dog"
  3. Ctrl Click "Dog"

Expected behavior

It records selectOption([])

Actual behavior

Nothing recorded and codegen stops working

Additional context

https://github.com/microsoft/playwright/assets/1796864/29d72bc5-ef7b-478c-b5a9-6bed9c4e71cc

Environment

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 5.22 GB / 15.54 GB
    Container: Yes
  Binaries:
    Node: 20.13.1 - ~/.local/share/mise/installs/node/20/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.8.0 - ~/.local/share/mise/installs/node/20/bin/npm
  IDEs:
    VSCode: 1.90.0 - /home/mtsmfm/.vscode-server/bin/89de5a8d4d6205e5b11647eb6a74844ca23d2573/bin/remote-cli/code
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
yury-s commented 1 month ago

I cannot reproduce it on Ubuntu 22.04

mtsmfm commented 1 month ago

I uploaded a screencast to show you the symptom

yury-s commented 1 month ago

Could be a difference between Ubuntu 20 and 22. I any case, I tried again: click 'dog' and then ctrl+click 'cat'. First time ctrl+click on cat does not change selection (just 'dog'), but repeating ctrl+click second time it is added to the selection, resulting in the following overall snippet:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://html-preview.github.io/?url=https://gist.githubusercontent.com/mtsmfm/a57f12f80fbfbda30ebec8790d760610/raw/002585795a6c1ef5a9f450b386db3618c1c2e8dc/multiselect.html');
  await page.getByLabel('Choose a pet:').selectOption('dog');
  await page.getByLabel('Choose a pet:').selectOption('dog');
  await page.getByLabel('Choose a pet:').selectOption(['dog', 'cat']);
});