When using the Firefox and Chrome extensions in Cypress, an 'Uncaught TypeError: e.matches is not a function' is thrown

[DaniBedz]

Bug Report 🐛

If using either the Firefox or Chrome extensions in Cypress test runner, when moving the mouse to pick elements, the following error message is thrown:

contentScript.js:1 Uncaught TypeError: e.matches is not a function at Y (contentScript.js:1) at PP (contentScript.js:1) at Ai (contentScript.js:1) at t (contentScript.js:1) at contentScript.js:1 at f (contentScript.js:1) at b (contentScript.js:1) at m (contentScript.js:1) Y @ contentScript.js:1 PP @ contentScript.js:1 Ai @ contentScript.js:1 t @ contentScript.js:1 (anonymous) @ contentScript.js:1 f @ contentScript.js:1 b @ contentScript.js:1 m @ contentScript.js:1 setTimeout (async) h @ contentScript.js:1 v @ contentScript.js:1 g @ contentScript.js:1

This issue can only be reproduced in the test runner window. If a new tab is opened, the element picker works as expected as detailed below:

To Reproduce ✔️

1. Open the Cypress test runner
2. Run a test in either Chrome or Firefox
3. Open the Dev tools at the Testing Playground tab
4. Click the 'Pick element' icon
5. Move the mouse over the page to preview different elements

Expected behavior 🤔

The element picker should preview queries with no errors, and the best query should be displayed, e.g:

screen.getByRole('button', { name: /google search/i })

Instead, multiple Uncaught TypeError: e.matches is not a function errors are displayed in the console, and only container.querySelector suggestions are displayed.

Suggested solution 🔦

The expected behavior is present if a new tab is opened in the test runner, but I am unsure about the difference between this tab and test runner tab.

Your Environment 💻

• browser: Chrome & Firefox
• os: Mac
• Cypress: v. 7.5.0
• Extensions: Offical releases in webstores, as well as builds from the latest develop branch

Thanks so much for your hard work on this amazing tool, I hope you're able to iron out this issue!