Usually, we can just chain two locators with `>>` to implement
`Locator.locator(locator)`. However, this does not play nicely with more
advanced inner locators like `or` and `and`:
```ts
const child = page.locator('input').or(page.locator('button'));
page.locator('parent').locator(child);
```
One would expect the above to locate "input or button" inside a
"parent". However, currently it locates "input inside a parent" or
"button", because it's translated to `parent >> input >>
internal:or="button"`.
To fix this, we have to wrap inner locator into `internal:chain` and
query it separately from the parent.
Fixes#23724.
So, the following will work:
```
page.frameLocator('iframe').locator('span').or(page.frameLoactor('iframe').locator('div'))
```
The following will not work, because frame locators are not exactly the
same:
```
page.frameLocator('#iframe1').locator('span').or(page.frameLoactor('#iframe2').locator('div'))
```
Also improve the error message to be more readable and include the
locator.
Fixes#23697.
Chained selectors where the second part starts with a scope did not work
before:
```ts
page.locator('div').locator(':scope + span')
page.locator('div >> +span')
```
Previously, such requests were skipped because they never receive
`Fetch.requestPaused` as there was no real network.
Also cleanup some redundant tests and move them from chromium-only file.
Fixes#23424.
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" />
```
I added a new option to the screenshot method to customize the color of
the box when we want to mask some elements for the screenshot.
The default color is pink `#FF00FF`, but with this new option you can
specify the color you like the most, like a nice green `#00FF00`:
```js
await page.screenshot({
mask: [page.locator('div').nth(5)],
maskColor: "#00FF00",
})
```
---------
Signed-off-by: Jasiel Guillén <darkensses@gmail.com>
