You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: articles/screenshot-stabilization/index.mdx
+6-6
Original file line number
Diff line number
Diff line change
@@ -52,23 +52,23 @@ To stabilize screenshots, use a loading indicator and wait for its removal befor
52
52
53
53
Example of a loader component:
54
54
55
-
```JavaScript
55
+
```html
56
56
<divid="loader"aria-busy />
57
57
```
58
58
59
59
## Dynamic Content
60
60
61
61
By nature, dynamic elements like **dates or time** introduce variability in screenshots. The easiest solution is to hide these elements by injecting CSS before taking a screenshot. With Argos, you can use the `data-visual-test` attribute to hide these elements from the screenshot.
For dates, another solution is to use a fixed date for your test environment. You can see here [how to do it with Cypress](https://docs.cypress.io/api/commands/clock). But this solution is not always possible in a real-world scenario.
68
68
69
69
## Animation
70
70
71
-
Capturing a screenshot during an animation will lead to flaky screenshots. They must be either completed or paused before taking a screenshot. With Argos, CSS animations are automatically paused, but JavaScript animations require manual intervention or hiding with `data-visual-test`.
71
+
Capturing a screenshot during an animation will lead to flaky screenshots. They must be either completed or paused before taking a screenshot. With Argos, CSS animations are automatically paused, but tsx animations require manual intervention or hiding with `data-visual-test`.
72
72
73
73
**Note**: If an animation causes layout shifts, it's recommended to remove it from the DOM with `data-visual-test="removed"` instead of merely hiding it with `data-visual-test="transparent"`.
74
74
@@ -79,7 +79,7 @@ External scripts and iframes (e.g. Intercom snippet) introduce flakiness due to
79
79
1. Avoid loading external scripts in your test environment.
The two main causes of data inconsistency are **randomized data seed** and **missing sorting order**. Usually, it's easy to fix by using a fixed dataset for your test environment. But if not, you can use the `data-visual-test` attribute to hide the area where the data is displayed but still keep the layout consistent in the screenshot.
0 commit comments