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.
When generating a selector, we tend to match by role and call various
roleUtils methods multiple times.
Apply the usual pattern for "nested operations counter" and aggressively
cache the results.
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')
```
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>
When element is not assigned to any slot in the shadow root, it is not
rendered and is considered hidden for ARIA in all browsers.
In Chromium/Firefox we use `Element.checkVisibility` that already
handles this, but in WebKit we have to check it manually.
Fixes#21487.
