Wrong behavior of middle and right click on element

[imiric]

On current main (1997670), calling ElementHandle.click({ button: 'middle' }) behaves as if the left click was triggered. For link elements this crucially doesn't result in opening a new background page, and the navigation happens on the current page.

For button: 'right' the behavior is similar in that the current page still navigates as if it was a left click, but strangely the right click is also triggered, so the context menu is shown on the new page:

This appears to be an old issue, as I was able to reproduce it on v0.3.0 and v0.4.0 as well.

Steps to reproduce

1. Run the following script:

   import { check } 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();
   
     page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
     const el = page.$('a[href="/my_messages.php"]')
   
     el.click({ button: 'middle' }).then(() => {
       check(page, {
         'header': (p) => {
           const el = p.$('h1');
           // el is null here, since the page has navigated away,
           // but we expect it to still exist, since a middle click
           // should open a new page in the background.
           console.log('h1 element:', el);
           if (el) {
              return el.textContent() == 'test.k6.io';
           }
           return false;
         },
       });
     }).finally(() => {
       page.close();
       browser.close();
     });
   }

2. Notice that h1 element: null is logged and that the header check fails.
   It might be easier to visualize if you add a sleep() before the check().