Skip to content

Commit 696b40a

Browse files
authored
docs: update click.md
1 parent 919659a commit 696b40a

File tree

1 file changed

+22
-24
lines changed

1 file changed

+22
-24
lines changed

docs/development/click.md

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Supported click scenarios
22

3-
These are some clicking corner cases that we did consider and decided to support.
3+
These are some of the corner cases that Playwright aims to support.
44

55
### Positioning
66

@@ -10,7 +10,7 @@ These are some clicking corner cases that we did consider and decided to support
1010
<button>Click me</button>
1111
```
1212

13-
We use `scrollRectIntoViewIfNeeded` to scroll the element into the viewport if at all possible.
13+
Playwright scrolls the element into the viewport if at all possible.
1414

1515
- Empty element with non-empty pseudo.
1616

@@ -19,7 +19,7 @@ These are some clicking corner cases that we did consider and decided to support
1919
<span></span>
2020
```
2121

22-
We retrieve the actual visible regions of the target element and click at the pseudo.
22+
Playwright retrieves the actual visible regions of the target element and clicks at the pseudo.
2323

2424
- Some part of the element is always outside of the viewport.
2525

@@ -28,23 +28,23 @@ These are some clicking corner cases that we did consider and decided to support
2828
<span><i>one</i><b>two</b></span>
2929
```
3030

31-
We retrieve the actual visible regions of the target element and click at the visible part.
31+
Playwright retrieves the actual visible regions of the target element and clicks at the visible part.
3232

3333
- Inline element is wrapped to the next line.
3434

35-
We retrieve the actual visible regions of the target element and click at one of the inline boxes.
35+
Playwright retrieves the actual visible regions of the target element and clicks at one of the inline boxes.
3636

3737
- Element is rotated with transform.
3838

3939
```html
4040
<button style="transform: rotate(50deg);">Click me</button>
4141
```
4242

43-
We retrieve the actual visible regions of the target element and click at the transformed visible point.
43+
Playwright retrieve the actual visible regions of the target element and clicks at the transformed visible point.
4444

4545
- Element is deep inside the iframes and/or shadow dom.
4646

47-
We click it.
47+
Playwright just clicks it.
4848

4949
### Dynamic changes
5050

@@ -56,7 +56,7 @@ These are some clicking corner cases that we did consider and decided to support
5656
</script>
5757
```
5858

59-
We wait for the element to be visible before clicking.
59+
Playwright waits for the element to be visible before clicking.
6060

6161
- Element is animating in.
6262

@@ -67,7 +67,7 @@ These are some clicking corner cases that we did consider and decided to support
6767
<button style="animation: 3s linear move forwards;">Click me</button>
6868
```
6969

70-
We wait for the element to stop moving before clicking.
70+
Playwright waits for the element to stop moving before clicking.
7171

7272
- Another element is temporary obscuring the target element.
7373

@@ -93,8 +93,8 @@ These are some clicking corner cases that we did consider and decided to support
9393
</script>
9494
```
9595

96-
For example, the dialog is dismissed and is slowly fading out. We wait for the obscuring element to disappear.
97-
More precisely, we wait for the target element to actually receive pointer events.
96+
For example, the dialog is dismissed and is slowly fading out. Playwright waits for the obscuring element to disappear.
97+
More precisely, it waits for the target element to actually receive pointer events.
9898

9999
- Element is replaced with another one after animation.
100100

@@ -112,7 +112,7 @@ These are some clicking corner cases that we did consider and decided to support
112112
</script>
113113
```
114114

115-
We wait for the element to be at a stable position, detect that it has been removed from the DOM and retry.
115+
Playwright waits for the element to be at a stable position, detects that it has been removed from the DOM and retries.
116116

117117
### Targeting
118118

@@ -124,17 +124,15 @@ These are some clicking corner cases that we did consider and decided to support
124124
</button>
125125
```
126126

127-
We assume that in such a case the first parent receiving pointer events is a click target.
128-
This is very convenient with something like `text=Click target` selector that actually targets the inner element.
127+
Playwright assumes that in such a case the first parent receiving pointer events is a click target.
128+
This is very convenient with something like `text=Click target` selector that actually targets the inner element but wants to click on the parent button.
129129

130130

131131
## Unsupported click scenarios
132132

133-
These are some clicking corner cases that we considered.
133+
Some scenarios here are marked as a bug in the web page - we believe that the page should be fixed because the real user will suffer the same issue. Playwright tries to throw when it's possible to detect the issue or timeout otherwise.
134134

135-
Some scenarios are marked as a bug in the web page - we believe that the page should be fixed because the real user will suffer the same issue. We try to throw when it's possible to detect the issue or timeout otherwise.
136-
137-
Other scenarios are perfectly fine, but we cannot support them, and usually suggest another way to handle. If Playwright logic does not work on your page, passing `{force: true}` option to the click will force the click without any checks. Use it when you know that's what you need.
135+
Other scenarios are perfectly fine, but Playwright cannot support them, and we usually suggest another way to handle. If Playwright logic does not work on your page, passing `{force: true}` option to the click will force the click without any checks. Use it when you know that's what you need.
138136

139137
### Positioning
140138

@@ -151,7 +149,7 @@ Other scenarios are perfectly fine, but we cannot support them, and usually sugg
151149
</script>
152150
```
153151

154-
We consider this a bug in the page and throw.
152+
Playwright throws, considering this a bug in the page.
155153

156154
### Dynamic changes
157155

@@ -165,7 +163,7 @@ Other scenarios are perfectly fine, but we cannot support them, and usually sugg
165163
<button style="animation: 3s linear move infinite;">Click me</button>
166164
```
167165
168-
We wait for the element to be at a stable position and timeout. A real user would be able to click in some cases.
166+
Playwright waits for the element to be at a stable position and times out. A real user would be able to click in some cases.
169167
170168
- Element is animating in, but temporarily pauses in the middle.
171169
@@ -176,7 +174,7 @@ Other scenarios are perfectly fine, but we cannot support them, and usually sugg
176174
<button style="animation: 3s linear move forwards;">Click me</button>
177175
```
178176

179-
We click in the middle of the animation and could actually click at the wrong element. We do not detect this case and do not throw. A real user would probably retry and click again.
177+
Playwright clicks in the middle of the animation and could actually click at the wrong element. Playwright does not detect this case and does not throw. A real user would probably retry and click again.
180178

181179
- Element is removed or hidden after `fetch` / `xhr` / `setTimeout`.
182180

@@ -187,9 +185,9 @@ Other scenarios are perfectly fine, but we cannot support them, and usually sugg
187185
</script>
188186
```
189187

190-
We click the element and might be able to misclick. We do not detect this case and do not throw.
188+
Playwright clicks the element, and might be able to misclick because it is already hidden. Playwright does not detect this case and does not throw.
191189

192-
This is a typical flaky failure, because the network fetch is racing against the input driven by Playwright. The suggested solution is to wait for the response to arrive, and only then click. For example, consider a filtered list with a "Apply filters" button that fetches new data, removes all items from the list and inserts new ones.
190+
This is a typical flaky failure, because the network fetch is racing against the input driven by Playwright. We suggest to wait for the response to arrive, and click after that. For example, consider a filtered list with an "Apply filters" button that fetches new data, removes all items from the list and inserts new ones.
193191

194192
```js
195193
await Promise.all([
@@ -215,7 +213,7 @@ Other scenarios are perfectly fine, but we cannot support them, and usually sugg
215213
</div>
216214
```
217215

218-
We consider the overlay temporary and timeout waiting for it to disappear.
216+
Playwright considers the overlay temporary and times out while waiting for the overlay to disappear.
219217
When the overlay element is actually handling the input instead of the target element, use `{force: true}` option to skip the checks and click anyway.
220218

221219
- Hover handler creates an overlay.

0 commit comments

Comments
 (0)