docs: improve assertView docs (#27)

gemini-testing · Aug 13, 2024 · ad008b1 · ad008b1
1 parent a86d194
commit ad008b1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 14 deletions.
diff --git a/docs/commands/browser/assertView.mdx b/docs/commands/browser/assertView.mdx
@@ -12,7 +12,8 @@ import Admonition from "@theme/Admonition";
 
 ## Использование {#usage}
 
-```javascript
+```typescript
+await browser.assertView(state, options);
 await browser.assertView(state, selector, options);
 ```
 
@@ -24,7 +25,7 @@ await browser.assertView(state, selector, options);
 </thead>
 <tbody>
 <tr><td>[state](#state)</td><td>String</td><td>Обязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста.</td></tr>
-<tr><td>[selector](#selector)</td><td>String или String[]</td><td>Обязательный параметр. Селектор DOM-элемента, который необходимо заснять.</td></tr>
+<tr><td>[selector](#selector)</td><td>String или String[]</td><td>Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. При отсутствии команда скриншотит viewport.</td></tr>
 <tr><td>[options](#options)</td><td>Object</td><td>Настройки команды _assertView_.</td></tr>
 
 </tbody>
@@ -36,7 +37,17 @@ await browser.assertView(state, selector, options);
 
 ### selector
 
-Обязательный параметр. Задает селектор DOM-элемента, который необходимо заснять.
+Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию `body`. При его отсутствии `assertView` применяет следующие опции, которые имеют приоритет над `assertViewOpts` из конфига, но не над параметром `options`:
+
+```
+{
+    allowViewportOverflow: true,
+    compositeImage: false,
+    captureElementFromTop: false
+}
+```
+
+Таким образом, по умолчанию без параметра `options` `assertView` скриншотит viewport.
 
 ### options
 
@@ -147,9 +158,9 @@ await browser.assertView(state, selector, options);
 
 ## Примеры использования {#examples}
 
-**example-1.js**
+**Визуальная проверка элемента**
 
-```javascript
+```typescript
 it("should assert view", async ({ browser }) => {
     await browser.url("some/url");
     await browser.assertView("plain", ".button");
@@ -159,9 +170,22 @@ it("should assert view", async ({ browser }) => {
 });
 ```
 
-**example-2.js**
+**Визуальная проверка всего вьюпорта**
+
+```typescript
+it("should assert viewport without selector", async ({ browser }) => {
+    await browser.url("some/url");
+    await browser.execute(() => window.scrollTo(0, 1000));
+    await browser.assertView("plain");
+
+    await browser.$(".button").click();
+    await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
+});
+```
+
+**Визуальная проверка с дополнительными опциями**
 
-```javascript
+```typescript
 it("should assert view with given options", async ({ browser }) => {
     await browser.url("some/url");
     await browser.assertView("plain", ".form", {

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx
@@ -13,7 +13,8 @@ Use the `assertView` command to take a screenshot for a specific test state and
 
 ## Usage {#usage}
 
-```javascript
+```typescript
+await browser.assertView(state, options);
 await browser.assertView(state, selector, options);
 ```
 
@@ -25,7 +26,7 @@ await browser.assertView(state, selector, options);
 </thead>
 <tbody>
 <tr><td>[state](#state)</td><td>String</td><td>Required parameter. The name of the test state. It must be unique within a single test.</td></tr>
-<tr><td>[selector](#selector)</td><td>String or String[]</td><td>Required parameter. The DOM element selector to capture.</td></tr>
+<tr><td>[selector](#selector)</td><td>String or String[]</td><td>Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured.</td></tr>
 <tr><td>[options](#options)</td><td>Object</td><td>Settings for the _assertView_ command.</td></tr>
 
 </tbody>
@@ -37,7 +38,18 @@ Required parameter. Specifies the name of the test state. The name must be uniqu
 
 ### selector
 
-Required parameter. Specifies the selector of the DOM element to capture.
+Required parameter. Specifies the selector of the DOM element to capture. If not specified or skipped, will be set to `body` and the following options will be automatically added to `options`:
+
+```
+{
+    allowViewportOverflow: true,
+    compositeImage: false,
+    captureElementFromTop: false
+}
+```
+
+These additional options will have higher priority than `assertViewOpts` from config, but lower priority than options from `options` parameter passed by user.
+So, assertView without `selector` parameter will take a screenshot of the current viewport.
 
 ### options
 
@@ -148,9 +160,9 @@ Specifies the settings for the `assertView` command:
 
 ## Usage Examples {#examples}
 
-**example-1.js**
+**Visual check of certain element**
 
-```javascript
+```typescript
 it("should assert view", async ({ browser }) => {
     await browser.url("some/url");
     await browser.assertView("plain", ".button");
@@ -160,9 +172,22 @@ it("should assert view", async ({ browser }) => {
 });
 ```
 
-**example-2.js**
+**Visual check of current viewport**
+
+```typescript
+it("should assert viewport without selector", async ({ browser }) => {
+    await browser.url("some/url");
+    await browser.execute(() => window.scrollTo(0, 1000));
+    await browser.assertView("plain");
+
+    await browser.$(".button").click();
+    await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
+});
+```
+
+**Visual check with additional options**
 
-```javascript
+```typescript
 it("should assert view with given options", async ({ browser }) => {
     await browser.url("some/url");
     await browser.assertView("plain", ".form", {