This PR fixes the react selector behavior to support components that are
wrapped by the memo or forwardRef React builtin functions.
Previously these components couldn't be selected. This PR fixes that
behavior, enabling selecting those components.
Current behavior:
```
const Foo = memo(() => <div id="foo_component" />);
Foo.displayName = "Foo";
...
playwright.$("_react=Foo") -> undefined
```
Fixed behavior:
```
const Foo = memo(() => <div id="foo_component" />);
Foo.displayName = "Foo";
...
playwright.$("_react=Foo") -> <div id ="foo_component" />
```
React takes time to render on overbooked machines. Let's use web-first assertions to test that they work as expected.
Error: expect(received).toBe(expected) // Object.is equality
Expected: 1
Received: 0
at /home/runner/work/playwright/playwright/tests/page/selectors-react.spec.ts:34:71
<img width="887" alt="image" src="https://user-images.githubusercontent.com/17984549/176618419-7653e5d8-4853-4618-af3b-2698827879d2.png">
Supports inline regex in addition to string: `_react=BookItem[author = /Ann?a/i]`.
This is similar to `text=` selector, but applies to `_react` and `_vue`
selectors. In the future, will also apply to `role=` selector.
This patch introduces 109 "#smoke" tests - a subset of tests that makes
sure that basic Playwright functionality works. This set is loosely
defined; feel free to add/remove tests to the set. The only goal is to
keep this set minimal & fast to run.
I tried to pick tests so that various parts of Playwright functionality
are exercised.
There were two issues:
- we did not find VDom roots inside shadow DOM
- we incorrectly relied on DOM's `contain` method to determine if
VDom's rendered node belongs to requested scope.
Fixes#10123
This patch adds support for the `react` selector engine that allows
selecting DOM elements based on the component name.
> **NOTE**: in case of multi-root components (React.Fragment), `react`
engine will select all root DOM elements.
> **NOTE**: `react` engine supports react v15+.
References #7189
