[Feature] Allow keyboard methods to be OS agnostic

[MartinP-Autopilot]

This is the advice currently on https://playwright.dev/docs/api/class-keyboard

// on Windows and Linux
await page.keyboard.press('Control+A');
// on macOS
await page.keyboard.press('Meta+A');

The script should not have to implement special handling to ensure that these methods work in the expected manner across each OS, the method should allow something like

await page.keyboard.press('ControlOrMeta+A');

and the method should handle the OS detection transparently.

[MartinP-Autopilot]

I just ran into something that should be taken into account when implementing this change - you can't just look at process.platform to figure out which key to use - we're now executing remotely to BrowserStack, running from linux on our CICD agent but the browser might be running on Mac or Windows - you need to query the browser -

async getBrowserOs(): Promise<string> {
    let OSName: string;
    let response: string = String(
      await this._page.evaluate(() => {
        return navigator.userAgent;
      })
    );
    if (response.indexOf('Win') != -1) OSName = 'Windows';
    if (response.indexOf('Mac') != -1) OSName = 'MacOS';
    if (response.indexOf('X11') != -1) OSName = 'Unix';
    if (response.indexOf('Linux') != -1) OSName = 'Linux';
    return OSName;
  }

[Nithos]

First of all, yes this would make the testing more seamless so +1 for this addition or similar.

As to your followup, I'm not sure if the browser check is correct as the commands might be coming from the OS. For instance I'm trying to copy some text then paste them back. To do the paste I use keyboard.press('${modifier}+KeyV') which depending on the userAgent will result in either Meta or Control.

Running this test on the 3 browsers (FF, Chromium, Webkit) the user agent returns Windows for FF and Chromium, and Mac for Webkit. So for FF and Chrome it will pick Control as the modifier, however running these tests locally on my Mac that is incorrect. It requires it to be Meta for all 3 cases as this is a System clipboard not a browser one.

So this may be further complicating how this could be implemented.

[canopy-js-user]

Did anyone find a workaround for this in the meantime? Thanks for making the original suggestion.

[nico-olivares]

This was my solution. It worked for me.

let macOS = process.platform === 'darwin' //darwin is macOS
let [newTab] = await Promise.all([
	context.waitForEvent('page'),
	macOS
		? link.click({ modifiers: ['Meta'] })
		: link.click({ modifiers: ['Control'] }),
])

[canopy-js-user]

Similar solution:

// before the tests

const os = require('os');
let platform = os.platform();
let systemNewTabKey;
if (platform === 'darwin') {
  systemNewTabKey = 'Meta';
} else {
  systemNewTabKey = 'Control';
}

// in the test

page.keyboard.press(`${systemNewTabKey}+Enter`)

[canbax]

@nico-olivares @canopy-js-user aren't your answers fall into the trap @MartinP-Autopilot mentioned? His solution seems more robust IMHO. BTW @MartinP-Autopilot 's answer give false results on MacOS m1 chips in Playwright.