[Feature]: Dismiss right click contextual menu easily

[siddharth2023]

🚀 Feature Request

1. Script right clicks on a page
2. Contextual menu is displayed
3. Script presses Escape
4. Contextual menu doesn't disappear

Currently there seems to be now way of dismissing the right click contextual menu once it is clicked.

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

test.describe('Simple Tests', () => {
    test('Right click', async ({ page }) => {
        await page.goto('https://en.wikipedia.org/wiki/IPhone');
        // Perform right click
        await page.getByRole('heading', { name: 'iPhone' }).click({ button: 'right' });
        // Contextual menu shows up but there's now way to dismiss it
        await page.getByText('Submit').press('Escape'); // Doesn't work
        await page.evaluate(() => {
            const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
            document.dispatchEvent(escapeEvent);
        }); // Doesn't work
        await page.reload();
        await page.getByPlaceholder('Search Wikipedia').click();
        await page.getByRole('button', { name: 'Personal tools' }).check();
        await page.getByRole('heading', { name: 'iPhone' }).click();
    });
});

Example

-

Motivation

My application shows an alert when it detects a right click but after that I am unable to dismiss the right click for the rest of the test.

[yury-s]

My application shows an alert when it detects a right click but after that I am unable to dismiss the right click for the rest of the test.

Alerts are auto-dismissed by default, you can also handle them manually, see https://playwright.dev/docs/dialogs

Does the context menu shown on right click affect further execution of your test? If so, can you share the code where it happens? In the example from the description the escape key is dispatched to the page but not to the native popup. That shouldn't affect the web page's behavior though.

[siddharth2023]

Apologies. It's not an alert. It's a toast like this https://ui.shadcn.com/docs/components/toast

Unfortunately, I can't share the exact code to reproduce. However, on some non M series Macs, a lot of times, the script stops executing two or three pages after the right click is triggered. I want to close the contextual menu once it is triggered.

I am not able to reproduce the issue with an extended version of the above test.

Is there a way I can get some debug info without sharing the exact code?

[yury-s]

Apologies. It's not an alert. It's a toast like this https://ui.shadcn.com/docs/components/toast

With this page the following example works just fine:

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

test('test', async ({ page }) => {
    await page.goto('https://ui.shadcn.com/docs/components/toast');
    await page.getByRole('button', { name: 'Add to calendar' }).click();
    await expect(page.getByText('Scheduled: Catch up', { exact: true })).toBeVisible();
    await page.keyboard.press('Escape');
    await expect(page.getByText('Scheduled: Catch up', { exact: true })).not.toBeVisible();
});

I am not able to reproduce the issue with an extended version of the above test. Is there a way I can get some debug info without sharing the exact code?

We need a reproducible example to act on this. It may well be a hydration problem where 'Escape' key handler is added after you pressed it in playwright.

[yury-s]

We need more information to act on this report. Please file a new one and link to this issue when you get back to it!