Skip to content

Commit edf58e6

Browse files
committed
fix: fix wrong language in article
1 parent db61505 commit edf58e6

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

articles/screenshot-stabilization/index.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -52,23 +52,23 @@ To stabilize screenshots, use a loading indicator and wait for its removal befor
5252

5353
Example of a loader component:
5454

55-
```JavaScript
55+
```html
5656
<div id="loader" aria-busy />
5757
```
5858

5959
## Dynamic Content
6060

6161
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.
6262

63-
```JavaScript
63+
```html
6464
<div id="clock" data-visual-test="transparent">...</div>
6565
```
6666

6767
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.
6868

6969
## Animation
7070

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`.
7272

7373
**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"`.
7474

@@ -79,7 +79,7 @@ External scripts and iframes (e.g. Intercom snippet) introduce flakiness due to
7979
1. Avoid loading external scripts in your test environment.
8080
2. Inject CSS to hide their UI impacts.
8181

82-
```JavaScript
82+
```ts
8383
await argosScreenshot(page, "homepage", {
8484
argosCSS: `
8585
.__argos__ iframe {
@@ -95,7 +95,7 @@ await argosScreenshot(page, "homepage", {
9595

9696
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.
9797

98-
```JavaScript
98+
```html
9999
<article>
100100
<div class="title" data-visual-test="blackout">Breaking news: XXX</div>
101101
<div class="content" data-visual-test="blackout">...</div>
@@ -108,7 +108,7 @@ Mobile status bars introduce flakiness in screenshots due to their dynamic natur
108108

109109
Example with Argos' WebDriverIO integration:
110110

111-
```JavaScript
111+
```ts
112112
import { argosScreenshot } from "@argos-ci/webdriverio";
113113
import { browser } from "@wdio/globals";
114114

0 commit comments

Comments
 (0)