diff --git a/blog/component-testing.mdx b/blog/component-testing.mdx index 6e80971c..a6ef991b 100644 --- a/blog/component-testing.mdx +++ b/blog/component-testing.mdx @@ -9,7 +9,7 @@ import Admonition from "@theme/Admonition"; В testplane в экспериментальном режиме поддержали компонентное тестирование и unit-тесты, выполняющиеся в браузере. - +{/* truncate */} Практически все современные веб-интерфейсы пишутся с использованием фреймворков (React, Vue, Svelte, ...) для упрощения создания и реиспользования компонентов. Такие компоненты важно тестировать в изоляции друг от друга, чтобы быть уверенным, что каждый компонент корректно справляется со своей работой. Точно так же как мы пишем unit-тесты отдельно от интеграционных. В Testplane уже поддержанно скриншотное тестирование компонентов с помощью [Storybook](https://storybook.js.org/), однако этот инструмент актуален не для всех проектов. Поэтому мы разработали ещё один вариант компонентного тестирования, который не требует использования Storybook. diff --git a/blog/local-browsers.mdx b/blog/local-browsers.mdx index 89c12c37..ab5eed4c 100644 --- a/blog/local-browsers.mdx +++ b/blog/local-browsers.mdx @@ -10,7 +10,7 @@ import localBrowsersExampleUrl from "/video/blog/local-browsers/local-browsers-e В Testplane добавлена возможность автоматической загрузки браузеров и драйверов для последующего локального запуска. - +{/* truncate */} Раньше Testplane с протоколом автоматизации webdriver можно было запустить локально только с вручную запущенным [selenium-standalone](https://github.com/webdriverio/selenium-standalone). Теперь достаточно указать `gridUrl: "local"` в [Конфиге Testplane](/docs/reference/config/main) или запустить тесты с [CLI-опцией](/docs/reference/cli) `--local`. В таком случае перед запуском тестов при необходимости будут загружены соответствующие браузеры и вебдрайверы к ним, которые также будут запущены для дальнейшего использования в этих тестах. diff --git a/blog/rebranding.mdx b/blog/rebranding.mdx index 3b55ac82..aee60700 100644 --- a/blog/rebranding.mdx +++ b/blog/rebranding.mdx @@ -7,7 +7,7 @@ date: 2024-05-20T13:00 Представляем вашему вниманию... **Testplane**. Наш проект Hermione решил сменить имя — встречайте проверенный годами продукт в свежем образе! - +{/* truncate */} Мы долго рассматривали все за и против и пришли к выводу, что новое имя — Testplane — наилучшим образом отражает наше видение и будущее развитие продукта: diff --git a/blog/selectivity.mdx b/blog/selectivity.mdx index 964b1ee8..1be26aea 100644 --- a/blog/selectivity.mdx +++ b/blog/selectivity.mdx @@ -7,7 +7,7 @@ date: 2025-12-03T14:00 В Testplane добавлена селективность запуска тестов — возможность автоматически запускать только те тесты, для которых изменились файлы, от которых они зависят. - +{/* truncate */} Селективность позволяет значительно ускорить процесс тестирования, запуская только релевантные тесты вместо всего набора. Testplane отслеживает зависимости каждого теста от файлов проекта — как код самих тестов, так и код, выполняемый в браузере — и при изменении файла запускает только те тесты, которые от него зависят. diff --git a/blog/storybook-testing.mdx b/blog/storybook-testing.mdx index 822e6337..e809dd67 100644 --- a/blog/storybook-testing.mdx +++ b/blog/storybook-testing.mdx @@ -7,7 +7,7 @@ date: 2024-09-26T13:00 Now, for automatic visual testing of your components, you only need Storybook with your components and the `@testplane/storybook` plugin. There’s no need to write any tests anymore. - +{/* truncate */} [Storybook][storybook] is a tool for developing user interfaces based on components. It allows developers to independently visualize components in various states in an isolated environment, separate from other components. This "showroom" is perfect for screenshot testing your components, as this isolated environment makes such tests significantly more stable and faster compared to e2e testing. diff --git a/blog/support-bidi-protocol.mdx b/blog/support-bidi-protocol.mdx index 85cc8e1d..780ebed2 100644 --- a/blog/support-bidi-protocol.mdx +++ b/blog/support-bidi-protocol.mdx @@ -13,7 +13,7 @@ import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example. В [testplane@8.27.0](https://github.com/gemini-testing/testplane/releases/tag/v8.27.0) добавлена поддержка [WebDriver BiDi протокола](https://w3c.github.io/webdriver-bidi/) (будущий единый стандарт для автоматизации браузеров). - +{/* truncate */} WebDriver BiDi (Bidirectional) — это новый протокол кросс-браузерной автоматизации, который сочетает в себе лучшее из существующих протоколов: [W3C WebDriver][webdriver] и [Chrome DevTools Protocol (CDP)][cdp] (подробнее о них можно почитать в нашей [статье][webvider-vs-cdp]). По сути новый протокол расширяет существующий W3C Webdriver протокол и добавляет в него новые кросс-браузерные команды, которые заменяют CDP протокол (не является кросс-браузерным). Старые webdriver-команды работают как и раньше по http, а новые команды обеспечивают двунаправленную коммуникацию между клиентом и браузером по websocket соединению. diff --git a/blog/testplane-9.mdx b/blog/testplane-9.mdx new file mode 100644 index 00000000..db9b3770 --- /dev/null +++ b/blog/testplane-9.mdx @@ -0,0 +1,432 @@ +--- +title: Привет, Testplane 9! +slug: testplane-9 +hide_table_of_contents: false +date: 2026-06-16T17:00 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import coverImage from "@site/static/img/blog/testplane-9/cover.png"; +import scrollableContainerTestplane9Image from "@site/static/img/blog/testplane-9/scrollable-container/testplane-9.png"; +import scrollableContainerTestplane8Image from "@site/static/img/blog/testplane-9/scrollable-container/testplane-8.png"; +import scrollableContainerPlaywrightImage from "@site/static/img/blog/testplane-9/scrollable-container/playwright.png"; +import interferenceTestplane9Image from "@site/static/img/blog/testplane-9/interferences/testplane-9.png"; +import interferenceTestplane8Image from "@site/static/img/blog/testplane-9/interferences/testplane-8.png"; +import interferencePlaywrightImage from "@site/static/img/blog/testplane-9/interferences/playwright.png"; +import stickyTestplane9Image from "@site/static/img/blog/testplane-9/sticky/testplane-9.png"; +import stickyTestplane8Image from "@site/static/img/blog/testplane-9/sticky/testplane-8.png"; +import stickyPlaywrightImage from "@site/static/img/blog/testplane-9/sticky/playwright.png"; +import lazyLoadContentTestplane9Image from "@site/static/img/blog/testplane-9/lazy-load-content/testplane-9.jpg"; +import lazyLoadContentTestplane8Image from "@site/static/img/blog/testplane-9/lazy-load-content/testplane-8.jpg"; +import lazyLoadContentPlaywrightImage from "@site/static/img/blog/testplane-9/lazy-load-content/playwright.jpg"; +import hoverTestplane9Image from "@site/static/img/blog/testplane-9/hover/testplane-9.png"; +import hoverTestplane8Image from "@site/static/img/blog/testplane-9/hover/testplane-8-with-rects.png"; +import hoverPlaywrightImage from "@site/static/img/blog/testplane-9/hover/playwright.png"; +import pseudoElementsTestplane9Image from "@site/static/img/blog/testplane-9/pseudo-elements/testplane-9.png"; +import pseudoElementsTestplane8Image from "@site/static/img/blog/testplane-9/pseudo-elements/testplane-8.png"; + +Встречайте Testplane 9: в этой версии заметно улучшились визуальные проверки, стала удобнее работа с глобальными объектами и появилось несколько полезных улучшений во всем фреймворке. + +Testplane 9 + +{/* truncate */} + +## Переход на Testplane 9 + +Руководство по миграции находится [здесь](/docs/migrations/how-to-upgrade-testplane-to-9). Ниже — обзор новых возможностей. + +## Полностью новый `assertView` + +Главное изменение в Testplane 9 — полностью переработанная логика работы `assertView`. + +Она лучше справляется с реальными интерфейсами: длинными страницами, скроллируемыми контейнерами, sticky-заголовками, fixed-оверлеями, шторками, модальными окнами, псевдоэлементами, тенями, обводками и другими случаями, из-за которых визуальные проверки часто становятся нестабильными. + +### Длинные скриншоты и контейнеры со скроллом + +`assertView` теперь гораздо лучше работает с элементами, которые не помещаются в один вьюпорт. + +Команда может автоматически определить, какой элемент нужно скроллить, найти неподвижные элементы и корректно обработать элементы с нестабильной высотой. + +
+

Страница для теста

+ + Код теста + +Testplane: + +```js +it("should capture a screenshot with assertView", async ({ browser }) => { + await browser.url("file:///page.html"); + + await browser.assertView("visual-engine-comparison", "[data-testid=list-container]"); +}); +``` + +Playwright: + +```js +test("should capture a scrollable drawer list with toHaveScreenshot", async ({ page }) => { + await page.goto("file:///page.html"); + + await expect(page.locator("[data-testid=list-container]")).toHaveScreenshot( + "visual-engine-comparison.png", + ); +}); +``` + +
+ + + + Скриншот скроллируемого контейнера в Testplane v9 + + + + Скриншот скроллируемого контейнера в Testplane v8 + + + + Скриншот скроллируемого контейнера в Playwright + + + + +### Избегание мешающих элементов + +В Testplane v9 `assertView` умеет скроллить элемент так, чтобы в итоговый скриншот не попадали наложения и нежелательные элементы. + +
+

Страница для теста

+ + Код теста + +Testplane: + +```js +it("should capture a screenshot of review item", async ({ browser }) => { + await browser.url("file:///page.html"); + + await browser.$(".Review.Review_hasReactions.ReviewViewer-Review").scrollIntoView(); + + await browser.assertView( + "visual-engine-comparison", + ".Review.Review_hasReactions.ReviewViewer-Review", + ); +}); +``` + +Playwright: + +```js +test("should capture a screenshot of review item", async ({ page }) => { + await page.goto("file:///page.html"); + + const el = await page.locator(".Review.Review_hasReactions.ReviewViewer-Review").first(); + + await el.scrollIntoViewIfNeeded(); + + await expect(el).toHaveScreenshot("review.png"); +}); +``` + +
+ + + + + + + + + + + + + + + + + + + +
Testplane v9Testplane v8Playwright
+ Скриншот в Testplane v9 + + Скриншот в Testplane v8 + + Скриншот в Playwright +
+ +### Sticky- и fixed-элементы + +Новая механика `assertView` вычисляет безопасную область до и во время съемки, поэтому sticky-заголовки, fixed-футеры и оверлеи не попадают в итоговый скриншот. + +
+ Код теста + +Testplane: + +```javascript +it("captures a card with fixed page chrome around it", async ({ browser }) => { + await browser.url("file:///page.html"); + + await browser.assertView("analytics-card", "[data-testid=analytics-card]"); +}); +``` + +Playwright: + +```javascript +test("captures a card with fixed page chrome around it", async ({ page }) => { + await page.goto("file:///page.html"); + + await expect(page.locator("[data-testid=analytics-card]")).toHaveScreenshot( + "analytics-card.png", + ); +}); +``` + +
+ + + + + + + + + + + + + + + + + + + +
Testplane v9Testplane v8Playwright
+ Скриншот со sticky-элементами в Testplane v9 + + Скриншот со sticky-элементами в Testplane v8 + + Скриншот со sticky-элементами в Playwright +
+ +### Элементы с нестабильной высотой и lazy-load-контентом + +В Testplane 9 `assertView` умеет работать с контентом, который подгружается при скролле, и заранее прогружать всю нужную область. + +Если даже после такой прогрузки высота элемента меняется в процессе снятия скриншота, `assertView` постарается сделать скриншот без видимых разрывов. + +
+ Код и сравнение скриншотов + + ```javascript + it("should capture a full page screenshot with assertView", async ({browser}) => { + await browser.url("https://sp.yandex.ru/s7"); + + await browser.execute(() => { + document.querySelectorAll('.DialElement_root__CftHX h1').forEach(h1 => { + h1.style.display = 'none'; + }); + }); + + await browser.assertView("visual-engine-comparison", "#__next"); + }); + ``` + + *Примечание: изображения ниже сильно сжаты из-за большого исходного размера.* + + *Кликните на изображение, чтобы открыть его в новой вкладке.* + + + + + + + + + + + + + + + + + + +
Testplane v9Testplane v8Playwright
+ Скриншот страницы с lazy-load-контентом в Testplane v9 + + Скриншот страницы с lazy-load-контентом в Testplane v8 + + Скриншот страницы с lazy-load-контентом в Playwright +
+ +
+ +### Подавление hover-эффектов + +В команде `assertView` появилась опция `disableHover`, которая подавляет hover-эффекты во время снятия скриншота. + +По умолчанию она включается автоматически, когда для того, чтобы снять скриншот элемента целиком, нужен скролл. + +_Примечание: на скриншоте Testplane v8 прямоугольниками выделены области, где видны hover-эффекты. В Testplane v9 их нет._ + + + + + + + + + + + + + + + + + + + +
Testplane v9Testplane v8Playwright
+ Скриншот с подавленными hover-эффектами в Testplane v9 + + Скриншот с hover-эффектами в Testplane v8 + + Скриншот с hover-эффектами в Playwright +
+ +### Поддержка псевдоэлементов + +Обновленный `assertView` умеет снимать псевдоэлементы, например `::before` и `::after`. + +В Testplane v8 для этого приходилось писать кастомную команду, которая сначала рисовала прямоугольник примерно поверх элемента, а затем снимала скриншот этой области. + +В Testplane v9 `assertView` работает с псевдоэлементами наравне с обычными элементами. + + + + + + + + + + + + + + + + + + + +
Testplane v9Testplane v8Playwright
+ Скриншот псевдоэлемента в Testplane v9 + + Скриншот псевдоэлемента в Testplane v8 + + TypeError: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined +
+ +### Другие заметные улучшения + +В Testplane 9 есть и другие изменения, которые делают визуальное тестирование удобнее и стабильнее: + +- Значение `tolerance` по умолчанию теперь `3.0`, а не `2.3`, как в Testplane v8. То есть по умолчанию проверки `assertView` стали немного менее строгими. +- Поддержка симуляторов iOS 26+ с новым Safari. +- Опция `cropMargins` для обрезки скриншотов. Она полезна для обрезки скроллбаров в окружениях, где их нельзя скрыть. +- Улучшенная отладка скриншотов: подробный лог и пошаговые скриншоты. + +## Асинхронный конфиг и lifecycle-хуки + +Конфиг Testplane теперь может быть асинхронной функцией. Это позволяет, например, загружать секреты, обращаться к внешним сервисам, готовить временные тестовые данные или вычислять настройки браузеров перед запуском. + +```typescript +import type { ConfigInput } from "testplane"; + +export default async (): Promise => { + const baseUrl = await getPreviewUrl(); + + return { + baseUrl, + browsers: { + chrome: { + desiredCapabilities: { browserName: "chrome" }, + }, + }, + }; +}; +``` + +`prepareEnvironment` тоже может быть асинхронным: + +```typescript +import type { ConfigInput } from "testplane"; + +const config: ConfigInput = { + prepareEnvironment: async () => { + process.env.AUTH_TOKEN = await createTestToken(); + }, + + browsers: { + chrome: { + desiredCapabilities: { browserName: "chrome" }, + }, + }, +}; + +export default config; +``` + +Некоторые lifecycle-события теперь тоже умеют ждать асинхронные обработчики, включая `CLI` и `NEW_BROWSER`. + +```javascript +const fs = require("node:fs/promises"); + +module.exports = testplane => { + testplane.on(testplane.events.CLI, async cli => { + const environments = JSON.parse(await fs.readFile("./test-envs.json", "utf8")); + + cli.option("--env ", `Environment: ${environments.join(", ")}`); + }); +}; +``` + +## Testplane больше не засоряет глобальный namespace + +Исторически тесты Testplane опирались на глобальные объекты вроде `it`, `describe`, `beforeEach`, `afterEach`, `testplane.*` и `hermione.*`. В Testplane 9 эти хелперы явно экспортируются из пакета и по умолчанию не добавляются в глобальное пространство, чтобы не конфликтовать с другими test runner'ами: + +```typescript +import { describe, it, beforeEach } from "testplane"; + +describe("profile", () => { + beforeEach(async ({ browser }) => { + await browser.url("/profile"); + }); + + it("shows user name", async ({ browser }) => { + await expect(browser.$("[data-testid=user-name]")).toHaveText("Alice"); + }); +}); +``` + +Но можно и вернуть всё как было: достаточно установить пакет [`@testplane/globals`](https://github.com/gemini-testing/testplane-globals). + +## Удаление `automationProtocol: "devtools"` и изменения в браузерных настройках по умолчанию + +Testplane 9 использует WebDriver как единственный `automationProtocol`. Старый режим `automationProtocol: "devtools"` удален, локальный запуск браузеров можно делать с помощью `gridUrl: "local"`. + +Примечание: CDP-протокол и все, что с ним связано, по-прежнему можно использовать. Это изменение касается только опции `automationProtocol`. + +## Прекращение поддержки Node 18 и 20 + +Testplane 9 необходима Node 22 или новее для работы (мы рекомендуем v22.12+). diff --git a/blog/testplane-vs-playwright.mdx b/blog/testplane-vs-playwright.mdx index 7bfff909..1a225c47 100644 --- a/blog/testplane-vs-playwright.mdx +++ b/blog/testplane-vs-playwright.mdx @@ -12,7 +12,7 @@ import Admonition from "@theme/Admonition"; И **Testplane**, и **Playwright** — это решения для end-to-end тестирования, но они имеют разные подходы и возможности. В этой статье мы проведём детальное сравнение этих инструментов, чтобы помочь вам сделать правильный выбор. - +{/* truncate */} ## Краткий обзор инструментов diff --git a/blog/time-travel-release.mdx b/blog/time-travel-release.mdx index aa87886f..60ee86df 100644 --- a/blog/time-travel-release.mdx +++ b/blog/time-travel-release.mdx @@ -15,7 +15,7 @@ import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example. ![](/img/blog/time-travel.png) - +{/* truncate */} ## Как получить доступ к последним обновлениям? diff --git a/blog/vscode-extension.mdx b/blog/vscode-extension.mdx index 4ea2c09a..97623812 100644 --- a/blog/vscode-extension.mdx +++ b/blog/vscode-extension.mdx @@ -11,7 +11,7 @@ import runTestsFromEditorVideoUrl from "/video/blog/vscode-extension/run-tests-f Для Testplane реализовали расширение для VS Code, с помощью которого можно настраивать Testplane с нуля, запускать тесты и удобно работать с [REPL режимом](/docs/reference/cli#testplane-repl). - +{/* truncate */} ### Установка diff --git a/docs/_partials/specs/assert-view-history.mdx b/docs/_partials/specs/assert-view-history.mdx new file mode 100644 index 00000000..eadd90ad --- /dev/null +++ b/docs/_partials/specs/assert-view-history.mdx @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
VersionChanges
v9.0.0 + Major update to the screenshot engine, see [full article](/blog/testplane-9) for + more details. Added `disableHover` and `cropMargins` options. `selectorToScroll` is + deprecated because the scrollable element is now detected automatically. `tolerance` + is now `3.0` by default instead of `2.3`. +
v8.32.0Added `waitForStaticToLoadTimeout` option.
v8.2.0Added `ignoreDiffPixelCount` option.
v8.0.0`disableAnimation` defaults to `true`.
diff --git a/docs/_partials/specs/assert-view-options.mdx b/docs/_partials/specs/assert-view-options.mdx index bcdd8fce..69efb108 100644 --- a/docs/_partials/specs/assert-view-options.mdx +++ b/docs/_partials/specs/assert-view-options.mdx @@ -9,76 +9,62 @@ ignoreElements - Array or String + `string | string[]` Elements (specified as selectors) that will be ignored when comparing screenshots. - Ignoring is implemented by painting the listed elements black. In the case of a - single element, the parameter can be specified as a string. + Ignoring is implemented by painting the listed elements black. If multiple elements match any of the selectors, all matches will be ignored. tolerance - Number - Sensitivity to color differences. + `number` + Sensitivity to color differences, `3.0` by default. [Read more](https://github.com/gemini-testing/looks-same). antialiasingTolerance - Number - Sensitivity to antialiasing. + `number` + Sensitivity to antialiasing, `4` by default. [Read more](https://github.com/gemini-testing/looks-same). allowViewportOverflow - Boolean + `boolean` - By default, Testplane throws an error if an element is outside the viewport - boundaries. This parameter disables boundary checking, allowing screenshots of - elements that do not fit within the viewport. Only the parts of the element that fit - within the viewport will be visible in the screenshot. However, if _compositeImage_ - is set to _true_, parts of the element that are below the viewport will also be - visible in the screenshot. Similarly, if _captureElementFromTop_ is set to _true_, - parts of the element that are above the viewport will also be included in the - screenshot. + By default, Testplane will print a warning if element could not be captured in full, this option disables the warning. + + Use this option in combination with `captureElementFromTop` to disable any scrolling that might happen before capture. captureElementFromTop - Boolean + `boolean` - Capture a screenshot of the element from the very top. If the element is outside the - viewport, it will be scrolled into view. + By default, Testplane may scroll the element into view before capturing a screenshot, if it's not visible initially. + + If this option is disabled and element is not visible initially, Testplane will throw an error. compositeImage - Boolean + `boolean` - If the element does not fit within the viewport, enabling this option will take - multiple screenshots of different parts of the element sequentially, and then stitch - them together into one image to display the entire element. + By default, Testplane will take capture the element in full by taking multiple screenshots of the element + and scrolling, and then stitch them together. + + When disabled, only the part of the element that is visible on the first screenshot will be captured. screenshotDelay - Number + `number` - Delay in milliseconds before taking a screenshot. This can be useful when there are - elements on the page that use animation, or a scrollbar that does not disappear - immediately and ends up in the resulting screenshot. - - - - selectorToScroll - String - - Selector to scroll. This can be useful when you need to take a screenshot of a modal - window that does not fit on the screen. Otherwise, without specifying the selector, - the scroll will be applied to the _window_ object, and the background will scroll, - leaving the popup window in place. + Delay in milliseconds before taking a screenshot. + + This can be useful to wait for a scrollbar to disappear before capturing a screenshot. disableAnimation - Boolean + `boolean` Disable animations and transitions when taking a screenshot. Default is `true` starting from version `8.0.0`. @@ -86,20 +72,51 @@ ignoreDiffPixelCount - `` `${number}%` `` or Number + number | \`$\{number\}%\` Percentage of pixels to ignore in the diff. Useful for ignoring very small diffs. + Default is `0`. Available starting from version `8.2.0`. waitForStaticToLoadTimeout - Number + `number` - Timeout for `waitForStaticToLoad` command, which is automatically called before - taking screenshot. Waiting is disabled, if value is set to `0`. Default is `5000`. + Default is `5000`. Timeout for `waitForStaticToLoad` command, which is automatically called before + taking screenshot. + + If value is set to `0`, waiting is disabled. Available starting from version `8.32.0`. + + disableHover + `"always" | "never" | "when-scrolling-needed"` + + By default, Testplane will disable hover effects if scrolling is needed to capture element in full. + + Available starting from version `9.0.0`. + + + + cropMargins + `{ top?: number, right?: number, bottom?: number, left?: number }` + + Determines the margins to crop the screenshot by. Useful to crop scrollbars on android emulators. + + Available starting from version `9.0.0`. + + + + selectorToScroll + `string` + + **Deprecated**. Starting from Testplane 9, the scrollable element is determined automatically. + + Manual override affects what element Testplane will scroll when capturing a screenshot. + + + diff --git a/docs/basic-guides/browsers-overview.mdx b/docs/basic-guides/browsers-overview.mdx index 3130bbb4..98bbe8f8 100644 --- a/docs/basic-guides/browsers-overview.mdx +++ b/docs/basic-guides/browsers-overview.mdx @@ -143,7 +143,7 @@ TESTPLANE_BROWSERS_PATH=./node_modules/.testplane npx testplane install-deps - Delete the .testplane directory in the home folder - Or delete the directory specified in `TESTPLANE_BROWSERS_PATH` -### Browser Support {#browser-support} +### Browser Support {/* #browser-support */} Below is a table of supported browsers: diff --git a/docs/basic-guides/configuration.mdx b/docs/basic-guides/configuration.mdx index ad599ff5..46e36e88 100644 --- a/docs/basic-guides/configuration.mdx +++ b/docs/basic-guides/configuration.mdx @@ -20,7 +20,7 @@ The configuration file is the primary source of settings: it specifies browsers, For a complete reference of parameters, see the [configuration documentation](../reference/config/main.mdx). -## Configuration file {#config-location} +## Configuration file {/* #config-location */} When launched, Testplane looks for a configuration file in the current working directory. The following file names are supported (in order of priority): @@ -37,7 +37,7 @@ If you need to use a config from a different location, specify the path using th npx testplane --config ./configs/testplane.local.ts ``` -## Setting parameters {#config-sources} +## Setting parameters {/* #config-sources */} Testplane configuration parameters can be set in three ways: @@ -45,7 +45,7 @@ Testplane configuration parameters can be set in three ways: 2. Environment variables: convenient for CI/CD and sensitive data 3. CLI arguments: for quick overrides at runtime -### Overriding via environment variables {#env-override} +### Overriding via environment variables {/* #env-override */} Any configuration parameter can be overridden via environment variables. The variable name is formed from the parameter name in the config: @@ -61,7 +61,7 @@ testplane_grid_url=local npx testplane testplane_browsers_firefox_headless=false npx testplane ``` -### Overriding via CLI {#cli-override} +### Overriding via CLI {/* #cli-override */} Parameters can also be overridden via CLI arguments: @@ -77,7 +77,7 @@ npx testplane --grid-url local npx testplane --browsers-firefox-headless false ``` -### Parameter priority {#priority} +### Parameter priority {/* #priority */} When values conflict, the following priority applies (from highest to lowest): @@ -88,11 +88,11 @@ When values conflict, the following priority applies (from highest to lowest): | 3 | Configuration file | `baseUrl: "http://example.com"` | | 4 | Default value | — | -## Parameter inheritance {#inheritance} +## Parameter inheritance {/* #inheritance */} Testplane supports cascading parameter inheritance: settings defined at the root level of the config apply to all browsers. Browsers can override these values. -### Inheritance example {#inheritance-example} +### Inheritance example {/* #inheritance-example */} ```typescript title="testplane.config.ts" import type { ConfigInput } from "testplane"; @@ -131,9 +131,9 @@ In this example: defined for each browser separately. -## Basic parameters {#basic-params} +## Basic parameters {/* #basic-params */} -### Retries (retry) {#retry} +### Retries (retry) {/* #retry */} The [`retry`](../reference/config/browsers.mdx#retry) parameter determines how many times Testplane will restart a failed test. @@ -154,7 +154,7 @@ export default { } satisfies ConfigInput; ``` -### Test file locations {#test-files} +### Test file locations {/* #test-files */} Test file sets and browsers for running them are specified in the `sets` section: @@ -187,7 +187,7 @@ npx testplane --set desktop For more details about sets, see the [sets documentation](../reference/config/sets.mdx). -### Dev Server {#dev-server} +### Dev Server {/* #dev-server */} The `devServer` section allows you to automatically start a development server before tests: @@ -223,7 +223,7 @@ Testplane will run the command and wait for the server to be ready at the specif For more details, see the [devServer documentation](../reference/config/dev-server.mdx). -### Execution parallelism {#parallelism} +### Execution parallelism {/* #parallelism */} Testplane runs tests in parallel, which significantly speeds up the test run. Two main parameters are used to configure parallelism: `sessionsPerBrowser` and `workers`. @@ -257,7 +257,7 @@ export default { In this example, Testplane can run up to 5 parallel Chrome sessions and up to 3 Firefox sessions, distributing tests among 4 worker processes. -## Timeouts {#timeouts} +## Timeouts {/* #timeouts */} Testplane allows you to configure timeouts to control operation execution time: @@ -288,11 +288,11 @@ export default { For a complete list of timeouts and their descriptions, see the [documentation](../reference/config/browsers.mdx#timeouts). -## Connecting plugins {#plugins} +## Connecting plugins {/* #plugins */} Plugins are connected and configured in the `plugins` section of the configuration file. Each key is the npm package name of the plugin, and the value is an object with its parameters. -### Example with html-reporter {#html-reporter-example} +### Example with html-reporter {/* #html-reporter-example */} [html-reporter](../html-reporter/html-reporter-setup.mdx) is a plugin for generating HTML test reports. @@ -348,11 +348,11 @@ If a parameter is specified in multiple places, the value with the highest prior This allows flexible control of plugin behavior in CI/CD without modifying the config. -## Setting defaults for commands {#command-defaults} +## Setting defaults for commands {/* #command-defaults */} Testplane allows you to set default values for parameters of certain commands. Instead of passing the same options with each call, you can specify them once in the configuration. -### assertViewOpts {#assert-view-opts} +### assertViewOpts {/* #assert-view-opts */} Default settings for screenshot testing. Allows you to specify which elements to ignore, acceptable pixel difference, delay before capture, and other screenshot comparison parameters. @@ -368,7 +368,7 @@ export default { For a complete list of parameters, see the [assertView](../commands/browser/assertView.mdx) documentation. -### expectOpts {#expect-opts} +### expectOpts {/* #expect-opts */} Settings for asynchronous assertions with waiting. @@ -386,7 +386,7 @@ export default { For a complete list of parameters, see the [expect matchers](../commands/expect/overview.mdx) documentation. -### stateOpts {#state-opts} +### stateOpts {/* #state-opts */} Settings for browser state save and restore commands. Defines what to save (cookies, localStorage, sessionStorage), where to save, and whether to delete the file after tests. diff --git a/docs/basic-guides/debugging-tests.mdx b/docs/basic-guides/debugging-tests.mdx index 2a26f746..9dedd8ec 100644 --- a/docs/basic-guides/debugging-tests.mdx +++ b/docs/basic-guides/debugging-tests.mdx @@ -2,13 +2,13 @@ import Admonition from "@theme/Admonition"; # Debugging Tests -## Problem {#problem} +## Problem {/* #problem */} In the course of developing tests, any developer will sooner or later encounter errors that are hard to detect through normal code review. At such moments, it's necessary to use software tools to understand where the error occurred, or why the test is behaving differently than expected. Let's explore the options available to a Testplane test developer. -## Solution 1: --inspect or --inspect-brk option {#solution_1} +## Solution 1: --inspect or --inspect-brk option {/* #solution_1 */} To see how a test is executed step by step, Testplane has a debug mode. This mode relies on the [V8 inspector integration with Node.js](https://nodejs.org/dist/latest-v16.x/docs/api/debugger.html#advanced-usage). @@ -52,11 +52,11 @@ testplane path/to/mytest.js --inspect with the parameter _sessionsPerBrowser=1_ to debug tests one at a time. -## Keywords {#keywords} +## Keywords {/* #keywords */} - --inspect - --inspect-brk -## Useful Links {#useful_links} +## Useful Links {/* #useful_links */} - [About Chrome DevTools](https://developer.chrome.com/docs/devtools/) diff --git a/docs/basic-guides/emulation.mdx b/docs/basic-guides/emulation.mdx index 10a3a0cb..a6b78f90 100644 --- a/docs/basic-guides/emulation.mdx +++ b/docs/basic-guides/emulation.mdx @@ -12,7 +12,7 @@ This feature only works with browsers supporting _Chrome DevTools Protocol (CDP) The CPU speed on mobile devices is significantly slower than on computers. Therefore, to emulate CPU speed in _puppeteer_, there is a method called [emulateCPUThrottling][emulate-cpu-throttling]. -### Example: Slowing Down CPU Speed by 8x {#example} +### Example: Slowing Down CPU Speed by 8x {/* #example */} Let's use this method to slow down CPU speed by 8 times: @@ -55,7 +55,7 @@ Besides custom settings, the [throttle][throttle] method supports the following - DSL - WiFi -### Example 1: Emulating a 2G Connection {#example_1} +### Example 1: Emulating a 2G Connection {/* #example_1 */} Let's emulate a 2G connection and open yandex.ru in Chrome with phone emulation: @@ -68,7 +68,7 @@ it("should open yandex.ru with emulation of 2G-connection", async function ({ br }); ``` -### Example 2: Emulating a Network with Given Characteristics {#example_2} +### Example 2: Emulating a Network with Given Characteristics {/* #example_2 */} We can also emulate a connection with specific characteristics: diff --git a/docs/basic-guides/reporters.mdx b/docs/basic-guides/reporters.mdx index 8f8b0a61..ca94bc4b 100644 --- a/docs/basic-guides/reporters.mdx +++ b/docs/basic-guides/reporters.mdx @@ -1,6 +1,6 @@ # Reporters -## Simple Reporter {#testplane_report} +## Simple Reporter {/* #testplane_report */} Out of the box, Testplane writes the following summary to the console: @@ -8,7 +8,7 @@ Out of the box, Testplane writes the following summary to the console: Total: 1812 Passed: 1792 Failed: 0 Skipped: 20 Retries: 47 ``` -## Stats Reporter {#stat_reporter_report} +## Stats Reporter {/* #stat_reporter_report */} If you add the [stat-reporter][stat-reporter] plugin to your project, you will get a more detailed report of the run results in the console after completing all the tests. For example: @@ -52,7 +52,7 @@ The `stat-reporter` plugin also allows generating reports in HTML or JSON format However, in terms of capabilities, the [stat-reporter][stat-reporter] plugin is significantly inferior to the [html-reporter][html-reporter] plugin, which provides much more advanced ways to work with tests and their run results. -## JSON Reporter {#json_reporter_report} +## JSON Reporter {/* #json_reporter_report */} Install the [json-reporter][json-reporter] plugin to get a JSON report with test results in the following format: @@ -82,7 +82,7 @@ Install the [json-reporter][json-reporter] plugin to get a JSON report with test } ``` -## HTML Reporter {#html_reporter_report} +## HTML Reporter {/* #html_reporter_report */} Testplane's HTML Reporter is an ever-evolving, sleek and feature-packed UI for analyzing test results. It allows you to: @@ -156,14 +156,14 @@ export default { }; ``` -## Keywords {#keywords} +## Keywords {/* #keywords */} - stat-reporter - json-reporter - html-reporter - gui -## Useful Links {#useful_links} +## Useful Links {/* #useful_links */} - [stat-reporter Plugin][stat-reporter] - [html-reporter Plugin][html-reporter] diff --git a/docs/basic-guides/visual-testing-with-storybook.mdx b/docs/basic-guides/visual-testing-with-storybook.mdx index 6e42cda3..2c39518d 100644 --- a/docs/basic-guides/visual-testing-with-storybook.mdx +++ b/docs/basic-guides/visual-testing-with-storybook.mdx @@ -9,7 +9,7 @@ With the [@testplane/storybook][testplane-storybook] plugin, you can automatical You just need to describe your component in `Storybook` and Testplane will automatically generate all necessary tests upon execution, run them in the required browsers and provide a visual report for updating screenshots. Additionally, if a [play function][play-function] has been declared for the components, Testplane will execute it before the test begins to set the component to the desired state. -## How to use? {#how_to_use} +## How to use? {/* #how_to_use */} ### Step 1: Install dependencies @@ -67,7 +67,7 @@ export default { }; ``` -## Custom tests {#custom_tests} +## Custom tests {/* #custom_tests */} Here's the translation: @@ -136,7 +136,7 @@ export default { The entire list of available options can be viewed on the [plugin page][plugin-link]. -## Additional settings {#extra_config} +## Additional settings {/* #extra_config */} Other types of testing can already be configured in your project, which can be run using Testplane. In order not to mix entities, we recommend using a separate config for Storybook tests and specifying it when running tests. @@ -169,7 +169,7 @@ export default { In this example, screenshot references would be stored in `screens//` folder, next to each of your story files. -## Optimization of test runs {#optimize_run} +## Optimization of test runs {/* #optimize_run */} Storybook tests themselves are quite fast, because they do not need a complex environment, and only one component is rendered on the page. In the context of the browser, Storybook testing environments are created one time and reused from test to test. Therefore, for the maximum speed of passing the tests, we recommend setting the [testsPerSession][tests-per-session] option with a value of at least 20 (more is better) to reuse the browser session as long as possible: diff --git a/docs/basic-guides/visual-testing.mdx b/docs/basic-guides/visual-testing.mdx index f7db0126..6f4ecaa2 100644 --- a/docs/basic-guides/visual-testing.mdx +++ b/docs/basic-guides/visual-testing.mdx @@ -5,7 +5,7 @@ We recommend using the [html-reporter][html-reporter] plugin, which provides a u ![Html-report](/img/docs/html-reporter/html-reporter.overview.png) -### Screenshot Comparison Features {#features} +### Screenshot Comparison Features {/* #features */} For screenshot checks, Testplane provides the `assertView` command, which allows you to take a screenshot of a specific element or the entire viewport. When the assertView command is invoked, it searches for the required element on the page with automatic waiting. By default, animations will be disabled on the page before taking a screenshot to eliminate potential instability in the test due to the changing state of the element. @@ -19,7 +19,7 @@ The following settings are taken into account during comparison: - comparison accuracy settings (acceptable deviations) are considered; - anti-aliasing (the most common diffs in screenshots) accuracy settings for fonts are considered. -### Usage {#usage} +### Usage {/* #usage */} ```typescript await browser.assertView(state, options); @@ -49,7 +49,7 @@ it("check search view", async ({ browser }) => { Read more about the capabilities of the `assertView' command in the relevant sections. -### Useful links {#useful_links} +### Useful links {/* #useful_links */} - [browser.assertView command][browser-command] - [element.assertView command][element-command] diff --git a/docs/commands/browser/$$.mdx b/docs/commands/browser/$$.mdx index 2b71523d..40f2c9ab 100644 --- a/docs/commands/browser/$$.mdx +++ b/docs/commands/browser/$$.mdx @@ -7,7 +7,7 @@ import Admonition from "@theme/Admonition"; # $$ -## Overview {#overview} +## Overview {/* #overview */} Use the `$$` command instead of [findElements][find-elements] as a shorter command to get multiple elements on the page. @@ -20,13 +20,13 @@ You can chain `$` or `$$` together to traverse down the DOM tree. selectors][how-to-use-selectors]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.$$(selector); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -38,7 +38,7 @@ await browser.$$(selector);
-## Examples {#examples} +## Examples {/* #examples */} **index.html** @@ -82,7 +82,7 @@ it("should get text of a menu link - JS Function", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [browser.$](../_dollar) - [element.$](../../element/_dollar) diff --git a/docs/commands/browser/$.mdx b/docs/commands/browser/$.mdx index fd66cf65..dfddad75 100644 --- a/docs/commands/browser/$.mdx +++ b/docs/commands/browser/$.mdx @@ -7,7 +7,7 @@ import Admonition from "@theme/Admonition"; # $ -## Overview {#overview} +## Overview {/* #overview */} Use the `$` command instead of [findElement][find-element] as a shorter command to get a single element on the page. @@ -20,13 +20,13 @@ You can chain `$` or `$$` together to traverse down the DOM tree. selectors][how-to-use-selectors]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.$(selector); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -38,7 +38,7 @@ await browser.$(selector);
-## Examples {#examples} +## Examples {/* #examples */} **index.html** @@ -105,7 +105,7 @@ it("should use Androids DataMatcher or ViewMatcher selector", async ({ browser } }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [browser.$$](../_dollardollar) - [element.$](../../element/_dollar) diff --git a/docs/commands/browser/action.mdx b/docs/commands/browser/action.mdx index b30745df..fd00f534 100644 --- a/docs/commands/browser/action.mdx +++ b/docs/commands/browser/action.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # action -## Overview {#overview} +## Overview {/* #overview */} Use the `action` command to perform input actions on one of the virtualizable devices in the web browser. @@ -25,7 +25,7 @@ await browser.action(...).perform(true); [Android][appium-android]. -## Keyboard Control {#keyboard_control} +## Keyboard Control {/* #keyboard_control */} Used when specifying `key` as the argument for the `action` command. Example: @@ -39,7 +39,7 @@ Returns a `KeyAction` object that supports the following actions: - `up(value: string)` — creates a key release action; - `pause(ms: number)` — specifies that the input source does nothing for the specified amount of time. -### Special Symbols {#special_symbols} +### Special Symbols {/* #special_symbols */} To use special symbols (`Control`, `Page Up`, `Shift`, etc.), you can use the `Key` object from the [webdriverio][webdriverio-npm] package. It contains Unicode representations of all necessary special symbols. Example: @@ -49,7 +49,7 @@ import { Key } from "webdriverio"; await browser.action("key").down(Key.Ctrl).perform(); ``` -### Usage Examples {#keyboard_examples} +### Usage Examples {/* #keyboard_examples */} ```typescript import { Key } from "webdriverio"; @@ -69,7 +69,7 @@ it("should emit key events using key action commands", async ({ browser }) => { Instead of a series of `down/up` events, it is better to use the `setValue` command. The example is purely for demonstrating the principles of the `action` command. -## Pointer Control {#pointer_control} +## Pointer Control {/* #pointer_control */} Used when specifying `pointer` as the argument for the `action` command, and you can also specify the pointer type. Example: @@ -92,7 +92,7 @@ Returns a `PointerAction` object that supports the following actions: Detailed information on the parameter types [PointerActionParams][pointer-action-params], [PointerActionMoveParams][pointer-action-move-params], and [PointerActionUpParams][pointer-action-up-params] can be found in the webdriverio source code. -### Usage Examples {#pointer_examples} +### Usage Examples {/* #pointer_examples */} ```typescript it("drag and drop using pointer action command", async ({ browser }) => { @@ -110,7 +110,7 @@ it("drag and drop using pointer action command", async ({ browser }) => { }); ``` -## Scroll Wheel Control {#scroll_wheel_control} +## Scroll Wheel Control {/* #scroll_wheel_control */} Used when specifying `wheel` as the argument for the `action` command. Example: @@ -125,7 +125,7 @@ Returns a `WheelAction` object that supports the following actions: Detailed information on the parameter type [ScrollParams][scroll-params] can be found in the webdriverio source code. -### Usage Examples {#scroll_examples} +### Usage Examples {/* #scroll_examples */} ```typescript it("should scroll using wheel action commands", async ({ browser }) => { @@ -144,7 +144,7 @@ it("should scroll using wheel action commands", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [actions](../actions) diff --git a/docs/commands/browser/actions.mdx b/docs/commands/browser/actions.mdx index 8a03adc6..e5aaa116 100644 --- a/docs/commands/browser/actions.mdx +++ b/docs/commands/browser/actions.mdx @@ -1,16 +1,16 @@ # actions -## Overview {#overview} +## Overview {/* #overview */} Use the `actions` command to perform multiple input actions on one of the virtualizable devices in the web browser, for example, to simulate page zooming. More detailed information is provided in the description of the [action][action] command. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.actions([action1, action2, ...]); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("run multiple actions at once for a pinch zoom", async ({ browser }) => { @@ -21,7 +21,7 @@ it("run multiple actions at once for a pinch zoom", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [action](../action) diff --git a/docs/commands/browser/addCommand.mdx b/docs/commands/browser/addCommand.mdx index be16c61a..fcd1f293 100644 --- a/docs/commands/browser/addCommand.mdx +++ b/docs/commands/browser/addCommand.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # addCommand -## Overview {#overview} +## Overview {/* #overview */} Use the `addCommand` command to add your own command to the browser or to an element. The command being added can be either synchronous or asynchronous. @@ -11,13 +11,13 @@ Use the `addCommand` command to add your own command to the browser or to an ele commands][how-to-add-custom-commands]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript browser.addCommand(name, callback, elementScope); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -49,7 +49,7 @@ browser.addCommand(name, callback, elementScope);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript // add the getUrlAndTitle command @@ -73,7 +73,7 @@ it("should use my add command", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [overwriteCommand](../overwriteCommand) diff --git a/docs/commands/browser/addTag.mdx b/docs/commands/browser/addTag.mdx index 236b861e..d1aa4cc3 100644 --- a/docs/commands/browser/addTag.mdx +++ b/docs/commands/browser/addTag.mdx @@ -4,11 +4,11 @@ import Version from "../../_partials/specs/version.mdx"; -## Overview {#overview} +## Overview {/* #overview */} Use the `addTag` command to add a tag (or multiple tags) to a test during execution. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.addTag("one"); @@ -32,7 +32,7 @@ function getTag(): TestTag[]; `getTag` returns an array of the tag objects mentioned above. Each object has a `title` and a `dynamic` field, which indicates that the tag was added during the test. -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} diff --git a/docs/commands/browser/assertView.mdx b/docs/commands/browser/assertView.mdx index ef36fee5..5f1ef6d2 100644 --- a/docs/commands/browser/assertView.mdx +++ b/docs/commands/browser/assertView.mdx @@ -1,41 +1,61 @@ import Admonition from "@theme/Admonition"; import AssertViewOptions from "../../_partials/specs/assert-view-options.mdx"; +import AssertViewHistory from "../../_partials/specs/assert-view-history.mdx"; # assertView -## Overview {#overview} +## Overview {/* #overview */} Use the `assertView` command to take a screenshot for a specific test state and compare it with a reference. - This command is implemented within Testplane, it's not available in the [API - WebDriverIO][webdriverio-api]. - + The `assertView` command uses [waitForExist][wait-for-exist] (with + [waitTimeout][wait-timeout] and [waitInterval][wait-interval]) to wait for the element to exist before taking a screenshot. + + It also automatically waits for static (fonts, images, etc.) to load using the [waitForStaticToLoad][wait-for-static-to-load] command. - - Automatically calls the [waitForStaticToLoad][wait-for-static-to-load] command before taking a - screenshot. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.assertView(state, options); await browser.assertView(state, selector, options); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */}
- - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
**Name****Type****Description**
[state](#state)StringRequired parameter. The name of the test state. It must be unique within a single test.
[selector](#selector)String or String[]Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured.
[options](#options)ObjectSettings for the _assertView_ command.
**Name****Type****Description**
[state](#state)`string` + Required parameter. The name of the test state. It must be unique within a single + test. +
[selector](#selector)`string | string[]` + Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, + current viewport is captured. +
[options](#options)`AssertViewOpts`Optional settings for the _assertView_ command.
### state @@ -44,18 +64,13 @@ Required parameter. Specifies the name of the test state. The name must be uniqu ### selector -Optional 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`: +Optional parameter. Specifies the selector of the DOM element to capture: -``` -{ - allowViewportOverflow: true, - compositeImage: false, - captureElementFromTop: false -} -``` +- If not specified, `assertView` will take a screenshot of the current viewport + +- If an array of selectors is passed, `assertView` will take a screenshot of an area covering all passed selectors -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. +- If any of the selectors matches multiple elements, `assertView` will take a screenshot of the first one ### options @@ -63,7 +78,7 @@ Specifies the settings for the `assertView` command: -## Usage Examples {#examples} +## Usage Examples {/* #examples */} **Visual check of certain element** @@ -108,14 +123,20 @@ it("should assert view with given options", async ({ browser }) => { }); ``` -## Related Commands {#related} +## History + + + +## Related Commands {/* #related */} - [element.assertView](../../element/assertView) - [browser.saveRecordingScreen](../saveRecordingScreen) - [browser.saveScreenshot](../saveScreenshot) - [element.saveScreenshot](../../element/saveScreenshot) -[webdriverio-api]: https://webdriver.io/docs/api [browsers-tolerance]: ../../../reference/config/browsers#tolerance [browsers-antialiasing-tolerance]: ../../../reference/config/browsers#antialiasing_tolerance [wait-for-static-to-load]: ../waitForStaticToLoad +[wait-for-exist]: ../../element/waitForExist +[wait-timeout]: ../../../reference/config/browsers#wait_timeout +[wait-interval]: ../../../reference/config/browsers#wait_interval diff --git a/docs/commands/browser/call.mdx b/docs/commands/browser/call.mdx index 40432fc3..08b2f758 100644 --- a/docs/commands/browser/call.mdx +++ b/docs/commands/browser/call.mdx @@ -1,18 +1,18 @@ # call -## Overview {#overview} +## Overview {/* #overview */} Use the `call` command to perform any asynchronous action in tests. This command is treated as a synchronous function. It accepts a promise and halts its execution until the promise is resolved. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.call(callback); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -24,7 +24,7 @@ await browser.call(callback);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("some testing here", async ({ browser }) => { diff --git a/docs/commands/browser/clearSession.mdx b/docs/commands/browser/clearSession.mdx index 460c6d1a..bd2475e2 100644 --- a/docs/commands/browser/clearSession.mdx +++ b/docs/commands/browser/clearSession.mdx @@ -1,16 +1,16 @@ # clearSession -## Overview {#overview} +## Overview {/* #overview */} Browser command that clears session state (deletes cookies, clears local and session storages). -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.clearSession(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("test", async ({ browser }) => { diff --git a/docs/commands/browser/debug.mdx b/docs/commands/browser/debug.mdx index b0e87b32..768e5c17 100644 --- a/docs/commands/browser/debug.mdx +++ b/docs/commands/browser/debug.mdx @@ -1,18 +1,18 @@ # debug -## Overview {#overview} +## Overview {/* #overview */} Use the `debug` command to pause the execution of a test in the browser. By pausing the test, you can switch to the browser, open _DevTools_, and inspect the web page in real-time. This can be useful for debugging the test. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.debug(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should demonstrate the debug command", async ({ browser }) => { diff --git a/docs/commands/browser/deleteCookies.mdx b/docs/commands/browser/deleteCookies.mdx index b65c24b1..5ea68f2d 100644 --- a/docs/commands/browser/deleteCookies.mdx +++ b/docs/commands/browser/deleteCookies.mdx @@ -1,18 +1,18 @@ # deleteCookies -## Overview {#overview} +## Overview {/* #overview */} Use the `deleteCookies` command to delete all or specific cookies for the current page. To delete specific cookies, you need to specify the cookie name as a string or a list of cookie names as an array of strings. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.deleteCookies(names); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -24,7 +24,7 @@ await browser.deleteCookies(names);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should delete cookies", async ({ browser }) => { @@ -59,7 +59,7 @@ it("should delete cookies", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [getCookies](../getCookies) - [setCookies](../setCookies) diff --git a/docs/commands/browser/execute.mdx b/docs/commands/browser/execute.mdx index e9a7110b..6cf9c7cc 100644 --- a/docs/commands/browser/execute.mdx +++ b/docs/commands/browser/execute.mdx @@ -1,6 +1,6 @@ # execute -## Overview {#overview} +## Overview {/* #overview */} Use `execute` to _synchronously_ execute the specified JavaScript code in the context of the currently selected frame. @@ -10,13 +10,13 @@ The `script` argument defines the script to be executed as the body of a functio Arguments can be any JSON primitives, arrays, or JSON objects. JSON objects that define a reference to a _WebElement_ will be converted to the corresponding DOM element. Similarly, any _WebElements_ in the script result will be returned to the client as _WebElement JSON_ objects. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.execute(script, arguments); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -29,7 +29,7 @@ await browser.execute(script, arguments);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should inject javascript on the page", async ({ browser }) => { @@ -49,7 +49,7 @@ it("should inject javascript on the page", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [executeAsync](../executeAsync) - [setTimeout](../setTimeout) diff --git a/docs/commands/browser/executeAsync.mdx b/docs/commands/browser/executeAsync.mdx index f4feab15..c8572404 100644 --- a/docs/commands/browser/executeAsync.mdx +++ b/docs/commands/browser/executeAsync.mdx @@ -1,6 +1,6 @@ # executeAsync -## Overview {#overview} +## Overview {/* #overview */} Use the `executeAsync` command to _asynchronously_ execute the specified JavaScript code in the context of the currently selected frame. @@ -10,13 +10,13 @@ The `script` argument defines the script to be executed as the body of a functio Arguments can be any JSON primitives, arrays, or JSON objects. JSON objects that define a reference to a _WebElement_ will be converted to the corresponding DOM element. Similarly, any _WebElements_ in the script result will be returned to the client as _WebElement JSON_ objects. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.executeAsync(script, arguments); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -29,7 +29,7 @@ await browser.executeAsync(script, arguments);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should execute async JavaScript on the page", async ({ browser }) => { @@ -53,7 +53,7 @@ it("should execute async JavaScript on the page", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [execute](../execute) - [setTimeout](../setTimeout) diff --git a/docs/commands/browser/executionContext.mdx b/docs/commands/browser/executionContext.mdx index e9f87725..06639ddf 100644 --- a/docs/commands/browser/executionContext.mdx +++ b/docs/commands/browser/executionContext.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # executionContext -## Overview {#overview} +## Overview {/* #overview */} During the test run, Testplane adds an `executionContext` property to `browser` to store the execution context. @@ -13,7 +13,7 @@ The `browser.executionContext` property holds the current test or hook \_Mocha o WebDriverIO][webdriverio-api]. -## Usage Example {#examples} +## Usage Example {/* #examples */} ```javascript it("should log execution context", async ({ browser }) => { diff --git a/docs/commands/browser/getConfig.mdx b/docs/commands/browser/getConfig.mdx index 6519368c..1d3bdd5a 100644 --- a/docs/commands/browser/getConfig.mdx +++ b/docs/commands/browser/getConfig.mdx @@ -1,16 +1,16 @@ # getConfig -## Overview {#overview} +## Overview {/* #overview */} Use the `getConfig` command to get the browser [config][browser-config]. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.getConfig(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("some test", async ({ browser }) => { diff --git a/docs/commands/browser/getCookies.mdx b/docs/commands/browser/getCookies.mdx index c8756680..ba11574c 100644 --- a/docs/commands/browser/getCookies.mdx +++ b/docs/commands/browser/getCookies.mdx @@ -1,18 +1,18 @@ # getCookies -## Overview {#overview} +## Overview {/* #overview */} Use the `getCookies` command to get all or specific cookies on the current page. To get specific cookies, you need to specify the cookie name as a string or a list of cookie names as an array of strings. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.getCookies(names); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -24,7 +24,7 @@ await browser.getCookies(names);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should return a cookie for me", async ({ browser }) => { @@ -50,7 +50,7 @@ it("should return a cookie for me", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [setCookies](../setCookies) - [deleteCookies](../deleteCookies) diff --git a/docs/commands/browser/getMeta.mdx b/docs/commands/browser/getMeta.mdx index 1619f97d..98e2e53a 100644 --- a/docs/commands/browser/getMeta.mdx +++ b/docs/commands/browser/getMeta.mdx @@ -16,7 +16,7 @@ To set values in the metadata, use the [setMeta](../setMeta) command. WebDriverIO][webdriverio-api]. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.getMeta(); @@ -28,7 +28,7 @@ or await browser.getMeta(key); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -40,7 +40,7 @@ await browser.getMeta(key);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should get meta info of test", async ({ browser }) => { @@ -58,7 +58,7 @@ it("should get meta info of test", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [setMeta](../setMeta) diff --git a/docs/commands/browser/getPuppeteer.mdx b/docs/commands/browser/getPuppeteer.mdx index 9159b425..e473c1c7 100644 --- a/docs/commands/browser/getPuppeteer.mdx +++ b/docs/commands/browser/getPuppeteer.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # getPuppeteer -## Overview {#overview} +## Overview {/* #overview */} Use the `getPuppeteer` command to get an instance of the browser's [Puppeteer][puppeteer] in order to execute specialized commands with it. @@ -15,13 +15,13 @@ Read more in the section "[How to use Chrome DevTools Protocol in testplane][how -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.getPuppeteer(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should allow me to use Puppeteer", async ({ browser }) => { diff --git a/docs/commands/browser/getState.mdx b/docs/commands/browser/getState.mdx index 7ae29f00..e0c94576 100644 --- a/docs/commands/browser/getState.mdx +++ b/docs/commands/browser/getState.mdx @@ -4,11 +4,11 @@ import Version from "../../_partials/specs/version.mdx"; -## Overview {#overview} +## Overview {/* #overview */} A browser command that restores the session state from a file which previously saved using the [saveState][saveState] command. -## Usage {#usage} +## Usage {/* #usage */} ```typescript import type { SaveStateData } from "testplane"; @@ -18,7 +18,7 @@ const stateDump: SaveStateData = await browser.getState({ }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -39,7 +39,7 @@ const stateDump: SaveStateData = await browser.getState({
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} Save state in file. @@ -51,7 +51,7 @@ it("test", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [saveState][saveState] diff --git a/docs/commands/browser/getWindowSize.mdx b/docs/commands/browser/getWindowSize.mdx index 7a31f66f..5f921099 100644 --- a/docs/commands/browser/getWindowSize.mdx +++ b/docs/commands/browser/getWindowSize.mdx @@ -1,16 +1,16 @@ # getWindowSize -## Overview {#overview} +## Overview {/* #overview */} Use the `getWindowSize` command to get the size of the browser window. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.getWindowSize(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should return browser window size", async ({ browser }) => { @@ -20,7 +20,7 @@ it("should return browser window size", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [setWindowSize](../setWindowSize) diff --git a/docs/commands/browser/keys.mdx b/docs/commands/browser/keys.mdx index 51c03fb7..46c9a0fa 100644 --- a/docs/commands/browser/keys.mdx +++ b/docs/commands/browser/keys.mdx @@ -1,6 +1,6 @@ # keys -## Overview {#overview} +## Overview {/* #overview */} Use the `keys` command to send a sequence of key presses to the active element. @@ -8,13 +8,13 @@ You can also use symbols like “Left Arrow” or “Right Arrow”. They will b Modifiers such as `Ctrl`, `Shift`, `Alt`, and `Meta` remain pressed until you release them by calling the function again. However, modifying clicks requires using the [performActions][perform-actions] method from the WebDriver Actions API. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.keys(value); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -33,7 +33,7 @@ await browser.keys(value);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("copies text out of active element", async ({ browser }) => { diff --git a/docs/commands/browser/mock.mdx b/docs/commands/browser/mock.mdx index 0c832838..08955c52 100644 --- a/docs/commands/browser/mock.mdx +++ b/docs/commands/browser/mock.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # mock -## Overview {#overview} +## Overview {/* #overview */} Use the `mock` command to mock the response to a request. @@ -23,13 +23,13 @@ Also, see the recipe "[How to intercept requests and responses][how-to-intercept -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.mock(url, { method, headers, responseHeaders, postData, statusCode }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -46,7 +46,7 @@ await browser.mock(url, { method, headers, responseHeaders, postData, statusCode
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should mock network resources", async ({ browser }) => { @@ -126,7 +126,7 @@ it("should redirect web resources", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [mockClearAll](../mockClearAll) - [mockRestoreAll](../mockRestoreAll) diff --git a/docs/commands/browser/mockClearAll.mdx b/docs/commands/browser/mockClearAll.mdx index 38d11d70..010c0843 100644 --- a/docs/commands/browser/mockClearAll.mdx +++ b/docs/commands/browser/mockClearAll.mdx @@ -1,16 +1,16 @@ # mockClearAll -## Overview {#overview} +## Overview {/* #overview */} Use the `mockClearAll` command to reset all stored information in registered mocks. Mocks are registered using the [mock][mock] command. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.mockClearAll(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("should clear all mocks", async ({ browser }) => { @@ -32,7 +32,7 @@ it("should clear all mocks", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [mock][mock] - [mockRestoreAll](../mockRestoreAll) diff --git a/docs/commands/browser/mockRestoreAll.mdx b/docs/commands/browser/mockRestoreAll.mdx index acbac548..a7a3f3b7 100644 --- a/docs/commands/browser/mockRestoreAll.mdx +++ b/docs/commands/browser/mockRestoreAll.mdx @@ -1,16 +1,16 @@ # mockRestoreAll -## Overview {#overview} +## Overview {/* #overview */} Use the `mockRestoreAll` command to restore the information and behavior in registered mocks to their original state. Mocks are registered using the [mock][mock] command. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.mockRestoreAll(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("should restore all mocks", async ({ browser }) => { @@ -29,7 +29,7 @@ it("should restore all mocks", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [mock][mock] - [mockClearAll](../mockClearAll) diff --git a/docs/commands/browser/newWindow.mdx b/docs/commands/browser/newWindow.mdx index 6ed24f0b..52eec6e7 100644 --- a/docs/commands/browser/newWindow.mdx +++ b/docs/commands/browser/newWindow.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # newWindow -## Overview {#overview} +## Overview {/* #overview */} Use the `newWindow` command to open a new window in the browser. @@ -32,13 +32,13 @@ Note that this command will automatically switch you to the new window upon exec -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.newWindow(url, { windowName, windowFeatures }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -52,7 +52,7 @@ await browser.newWindow(url, { windowName, windowFeatures });
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should open a new tab", async ({ browser }) => { diff --git a/docs/commands/browser/openAndWait.mdx b/docs/commands/browser/openAndWait.mdx index a99418af..d30dfa1e 100644 --- a/docs/commands/browser/openAndWait.mdx +++ b/docs/commands/browser/openAndWait.mdx @@ -1,12 +1,12 @@ # openAndWait -## Overview {#overview} +## Overview {/* #overview */} Use the `openAndWait` command to open a page and wait for it to load (based on a combination of specified factors). Functions for waiting for network idle and failing on network errors are only available when using browsers that support _Chrome DevTools Protocol (CDP)_. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.openAndWait("some/url", { @@ -20,7 +20,7 @@ await browser.openAndWait("some/url", { }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -52,7 +52,7 @@ await browser.openAndWait("some/url", {
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("some test", async ({ browser }) => { diff --git a/docs/commands/browser/overwriteCommand.mdx b/docs/commands/browser/overwriteCommand.mdx index 3872381c..c09f1187 100644 --- a/docs/commands/browser/overwriteCommand.mdx +++ b/docs/commands/browser/overwriteCommand.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # overwriteCommand -## Overview {#overview} +## Overview {/* #overview */} Use the `overwriteCommand` command to override existing commands of the browser or an element. @@ -10,13 +10,13 @@ Use the `overwriteCommand` command to override existing commands of the browser Also see the recipe "[How to add custom commands][how-to-add-custom-commands]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.overwriteCommand(name, callback, elementScope); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -47,7 +47,7 @@ await browser.overwriteCommand(name, callback, elementScope);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript // log the pause duration in ms before the pause and then return the value @@ -67,7 +67,7 @@ it("should use my overwrite command", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [addCommand](../addCommand) diff --git a/docs/commands/browser/pause.mdx b/docs/commands/browser/pause.mdx index 1dcbc366..9c175152 100644 --- a/docs/commands/browser/pause.mdx +++ b/docs/commands/browser/pause.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # pause -## Overview {#overview} +## Overview {/* #overview */} Use the `pause` command to halt the execution of the test for a specified period of time. @@ -12,13 +12,13 @@ Use the `pause` command to halt the execution of the test for a specified period _waitFor*_ commands. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.pause(milliseconds); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -30,7 +30,7 @@ await browser.pause(milliseconds);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should pause the execution", async ({ browser }) => { diff --git a/docs/commands/browser/reactDollar.mdx b/docs/commands/browser/reactDollar.mdx index d92be12e..466662e6 100644 --- a/docs/commands/browser/reactDollar.mdx +++ b/docs/commands/browser/reactDollar.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # react$ -## Overview {#overview} +## Overview {/* #overview */} Use the `react$` command to find React components on the page by their actual name, while filtering them by props and state. @@ -13,13 +13,13 @@ Read more about React selectors in the recipe "[How to use selectors][how-to-use -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.react$(reactComponentSelector, { props, state }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -33,7 +33,7 @@ await browser.react$(reactComponentSelector, { props, state });
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should calculate 7 * 6", async ({ browser }) => { @@ -67,7 +67,7 @@ it("should calculate 7 * 6", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [browser.react$$](../reactDollarDollar) - [element.react$](../../element/reactDollar) diff --git a/docs/commands/browser/reactDollarDollar.mdx b/docs/commands/browser/reactDollarDollar.mdx index a97b712e..f3fdcb6a 100644 --- a/docs/commands/browser/reactDollarDollar.mdx +++ b/docs/commands/browser/reactDollarDollar.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # react$$ -## Overview {#overview} +## Overview {/* #overview */} Use the `react$$` command to find multiple React components on the page by their actual name, while filtering them by props and state. @@ -13,13 +13,13 @@ Read more about React selectors in the recipe "[How to use selectors][how-to-use -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.react$$(reactComponentSelector, { props, state }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -33,7 +33,7 @@ await browser.react$$(reactComponentSelector, { props, state });
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should calculate 7 * 6", async ({ browser }) => { @@ -48,7 +48,7 @@ it("should calculate 7 * 6", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [browser.react$](../reactDollar) - [element.react$](../../element/reactDollar) diff --git a/docs/commands/browser/reloadSession.mdx b/docs/commands/browser/reloadSession.mdx index a089b601..c67f7598 100644 --- a/docs/commands/browser/reloadSession.mdx +++ b/docs/commands/browser/reloadSession.mdx @@ -1,18 +1,18 @@ # reloadSession -## Overview {#overview} +## Overview {/* #overview */} Use the `reloadSession` command to create a new Selenium session with the current capabilities. This command can be useful if you are testing an application with many states and need to clear the browser session between individual tests in a single file, to avoid creating hundreds of separate test files with WDIO. However, be cautious, as this command significantly impacts testing time since creating new Selenium sessions is time-consuming, especially when using cloud services. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.reloadSession(); ``` -## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should reload my session with current capabilities", async ({ browser }) => { diff --git a/docs/commands/browser/restoreState.mdx b/docs/commands/browser/restoreState.mdx index 80a2a1b2..1f45e64d 100644 --- a/docs/commands/browser/restoreState.mdx +++ b/docs/commands/browser/restoreState.mdx @@ -5,11 +5,11 @@ import Version from "../../_partials/specs/version.mdx"; -## Overview {#overview} +## Overview {/* #overview */} Browser command that restores session state (cookies, local and session storages) from a file or variable. -## Usage {#usage} +## Usage {/* #usage */} You can restore the browser state from either a file (using the `path` parameter) or directly from an object (using the `data` parameter). @@ -34,7 +34,7 @@ await browser.restoreState({ }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -93,7 +93,7 @@ await browser.restoreState({
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} Restore state from file. @@ -150,7 +150,7 @@ export default { } satisfies ConfigInput; ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [saveState](../saveState) - [afterAll](../../../reference/config/after-all) diff --git a/docs/commands/browser/runStep.mdx b/docs/commands/browser/runStep.mdx index 8f02545d..b2edab8a 100644 --- a/docs/commands/browser/runStep.mdx +++ b/docs/commands/browser/runStep.mdx @@ -1,17 +1,17 @@ # runStep -## Overview {#overview} +## Overview {/* #overview */} Use the `runStep` command to obtain a human-readable execution history of the test, which will automatically be displayed in the [html-reporter][reporter]. Steps can be nested. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.runStep(stepName, stepCb); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -35,7 +35,7 @@ await browser.runStep(stepName, stepCb);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("test", async ({ browser }) => { diff --git a/docs/commands/browser/savePDF.mdx b/docs/commands/browser/savePDF.mdx index 882452d7..cf8292e3 100644 --- a/docs/commands/browser/savePDF.mdx +++ b/docs/commands/browser/savePDF.mdx @@ -1,10 +1,10 @@ # savePDF -## Overview {#overview} +## Overview {/* #overview */} Use the `savePDF` command to save the current browser context to a PDF file. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.savePDF(filepath, { @@ -22,7 +22,7 @@ await browser.savePDF(filepath, { }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -45,7 +45,7 @@ await browser.savePDF(filepath, {
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should save a PDF screenshot of the browser view", async ({ browser }) => { @@ -53,7 +53,7 @@ it("should save a PDF screenshot of the browser view", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [saveRecordingScreen](../saveRecordingScreen) - [saveScreenshot](../saveScreenshot) diff --git a/docs/commands/browser/saveRecordingScreen.mdx b/docs/commands/browser/saveRecordingScreen.mdx index bd657543..227d6a16 100644 --- a/docs/commands/browser/saveRecordingScreen.mdx +++ b/docs/commands/browser/saveRecordingScreen.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # saveRecordingScreen -## Overview {#overview} +## Overview {/* #overview */} Use the `saveRecordingScreen` command to save a video to a file that was started with the [startRecordingScreen][start-recording-screen] command. @@ -11,13 +11,13 @@ Use the `saveRecordingScreen` command to save a video to a file that was started [Appium][appium]. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.saveRecordingScreen(filepath); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -29,7 +29,7 @@ await browser.saveRecordingScreen(filepath);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should save a video", async ({ browser }) => { @@ -39,7 +39,7 @@ it("should save a video", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [savePDF](../savePDF) - [saveScreenshot](../saveScreenshot) diff --git a/docs/commands/browser/saveScreenshot.mdx b/docs/commands/browser/saveScreenshot.mdx index 144db5a3..71cf9d7e 100644 --- a/docs/commands/browser/saveScreenshot.mdx +++ b/docs/commands/browser/saveScreenshot.mdx @@ -1,18 +1,18 @@ # saveScreenshot -## Overview {#overview} +## Overview {/* #overview */} Use the `saveScreenshot` command to save a screenshot of the current browser context to a PNG file. Keep in mind that some browser drivers capture screenshots of the entire document (e.g., the [Gecko driver][gecko] for Firefox), while others capture only the current viewport (e.g., [Chromedriver][chromedriver] for Chrome). -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.saveScreenshot(filepath); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -24,7 +24,7 @@ await browser.saveScreenshot(filepath);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should save a screenshot of the browser view", async ({ browser }) => { @@ -32,7 +32,7 @@ it("should save a screenshot of the browser view", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [browser.savePDF](../savePDF) - [browser.saveRecordingScreen](../saveRecordingScreen) diff --git a/docs/commands/browser/saveState.mdx b/docs/commands/browser/saveState.mdx index c8b82afd..7b8e19bc 100644 --- a/docs/commands/browser/saveState.mdx +++ b/docs/commands/browser/saveState.mdx @@ -4,11 +4,11 @@ import Version from "../../_partials/specs/version.mdx"; -## Overview {#overview} +## Overview {/* #overview */} Browser command that saves session state (cookies, local and session storages). -## Usage {#usage} +## Usage {/* #usage */} This command returns a state of the page state, including cookies, localStorage, and sessionStorage. You can use parameters to exclude specific types of data if needed. @@ -27,7 +27,7 @@ const stateDump: SaveStateData = await browser.saveState({ }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -83,7 +83,7 @@ const stateDump: SaveStateData = await browser.saveState({
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} Save state in file. @@ -98,7 +98,7 @@ it("test", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [restoreState](../restoreState) - [afterAll](../../../reference/config/after-all) diff --git a/docs/commands/browser/scroll.mdx b/docs/commands/browser/scroll.mdx index 768ff117..c041416b 100644 --- a/docs/commands/browser/scroll.mdx +++ b/docs/commands/browser/scroll.mdx @@ -1,16 +1,16 @@ # scroll -## Overview {#overview} +## Overview {/* #overview */} Use the `scroll` command to scroll the browser viewport. Note that the `x` and `y` coordinates refer to the current scrolling position of the viewport. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.scroll(x, y); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -23,7 +23,7 @@ await browser.scroll(x, y);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("should demonstrate the scroll command", async ({ browser }) => { @@ -35,7 +35,7 @@ it("should demonstrate the scroll command", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [element.scrollIntoView](../../element/scrollIntoView) diff --git a/docs/commands/browser/setCookies.mdx b/docs/commands/browser/setCookies.mdx index 07a0e013..4988a0ef 100644 --- a/docs/commands/browser/setCookies.mdx +++ b/docs/commands/browser/setCookies.mdx @@ -1,18 +1,18 @@ # setCookies -## Overview {#overview} +## Overview {/* #overview */} Use the `setCookies` command to set cookies on the current page. Make sure you are on the page for which you want to set the cookies. You cannot set cookies for an arbitrary page without being on it. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.setCookies(cookies); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -43,7 +43,7 @@ await browser.setCookies(cookies);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should set a cookie for the page", async ({ browser }) => { @@ -85,7 +85,7 @@ it("should set a cookie for the page", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [getCookies](../getCookies) - [deleteCookies](../deleteCookies) diff --git a/docs/commands/browser/setMeta.mdx b/docs/commands/browser/setMeta.mdx index 3ea4575f..57c8d0bd 100644 --- a/docs/commands/browser/setMeta.mdx +++ b/docs/commands/browser/setMeta.mdx @@ -13,13 +13,13 @@ To read the metadata, use the [getMeta](../getMeta) command. WebDriverIO][webdriverio-api]. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.setMeta(key, value); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -32,7 +32,7 @@ await browser.setMeta(key, value);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should get meta info of test", async ({ browser }) => { @@ -50,7 +50,7 @@ it("should get meta info of test", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [getMeta](../getMeta) diff --git a/docs/commands/browser/setOrientation.mdx b/docs/commands/browser/setOrientation.mdx index ff1353af..60cce54b 100644 --- a/docs/commands/browser/setOrientation.mdx +++ b/docs/commands/browser/setOrientation.mdx @@ -1,17 +1,17 @@ # setOrientation -## Overview {#overview} +## Overview {/* #overview */} Use the `setOrientation` command to change the browser orientation. This command ensures that subsequent commands will not start executing until the orientation change occurs. If the device does not support this feature, the command will be ignored. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.setOrientation(orientation); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -33,7 +33,7 @@ await browser.setOrientation(orientation);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("test", async ({ browser }) => { diff --git a/docs/commands/browser/setTimeout.mdx b/docs/commands/browser/setTimeout.mdx index e7d08a0c..e4e1000c 100644 --- a/docs/commands/browser/setTimeout.mdx +++ b/docs/commands/browser/setTimeout.mdx @@ -1,16 +1,16 @@ # setTimeout -## Overview {#overview} +## Overview {/* #overview */} Use the `setTimeout` command to set timeouts for element searches on the page, document load waits, and script executions through the [execute][execute] or [executeAsync][execute-async] commands. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.setTimeout({ implicit, pageLoad, script }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -24,7 +24,7 @@ await browser.setTimeout({ implicit, pageLoad, script });
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should change timeout duration for session with long code duration", async ({ browser }) => { diff --git a/docs/commands/browser/setWindowSize.mdx b/docs/commands/browser/setWindowSize.mdx index 91448918..0ffda5b8 100644 --- a/docs/commands/browser/setWindowSize.mdx +++ b/docs/commands/browser/setWindowSize.mdx @@ -1,16 +1,16 @@ # setWindowSize -## Overview {#overview} +## Overview {/* #overview */} Use the `setWindowSize` command to change the outer size of the browser window to the specified width and height. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.setWindowSize(width, height); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -23,7 +23,7 @@ await browser.setWindowSize(width, height);
-## Related Commands {#related} +## Related Commands {/* #related */} - [getWindowSize](../getWindowSize) diff --git a/docs/commands/browser/switchToRepl.mdx b/docs/commands/browser/switchToRepl.mdx index aaceb7f6..4f89e6f7 100644 --- a/docs/commands/browser/switchToRepl.mdx +++ b/docs/commands/browser/switchToRepl.mdx @@ -2,19 +2,19 @@ import Admonition from "@theme/Admonition"; # switchToRepl -## Overview {#overview} +## Overview {/* #overview */} Use the `switchToRepl` command to stop the test execution and open an interactive `REPL` interface in the terminal where you can execute code line by line and observe the results in real-time. This mode allows for convenient debugging of problematic tests both in a locally installed browser and in a remote grid (for example, using [VNC][vnc]). For more convenient use of the `REPL` mode, it is recommended to use the [VS Code extension][extension]. -## Usage {#usage} +## Usage {/* #usage */} ```typescript await browser.runStep(stepName, stepCb); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -38,7 +38,7 @@ await browser.runStep(stepName, stepCb);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```typescript it("test", async ({ browser }) => { diff --git a/docs/commands/browser/switchWindow.mdx b/docs/commands/browser/switchWindow.mdx index 4eb9a90f..306dbd27 100644 --- a/docs/commands/browser/switchWindow.mdx +++ b/docs/commands/browser/switchWindow.mdx @@ -1,16 +1,16 @@ # switchWindow -## Overview {#overview} +## Overview {/* #overview */} Use the `switchWindow` command to focus on a specific tab or window. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.switchWindow(urlOrTitleToMatch); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -22,7 +22,7 @@ await browser.switchWindow(urlOrTitleToMatch);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should switch to another window", async ({ browser }) => { diff --git a/docs/commands/browser/throttle.mdx b/docs/commands/browser/throttle.mdx index f363e8cb..18fc624c 100644 --- a/docs/commands/browser/throttle.mdx +++ b/docs/commands/browser/throttle.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # throttle -## Overview {#overview} +## Overview {/* #overview */} Use the `throttle` command to simulate different types of network connections for the user. @@ -27,13 +27,13 @@ Also, see the recipe "[How to manage network bandwidth][how-to-manage-network-ba -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.throttle({ offline, latency, downloadThroughput, uploadThroughput }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -48,7 +48,7 @@ await browser.throttle({ offline, latency, downloadThroughput, uploadThroughput
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should throttle the network", async ({ browser }) => { diff --git a/docs/commands/browser/touchAction.mdx b/docs/commands/browser/touchAction.mdx index fe5850f2..940c7917 100644 --- a/docs/commands/browser/touchAction.mdx +++ b/docs/commands/browser/touchAction.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # touchAction -## Overview {#overview} +## Overview {/* #overview */} Use the `touchAction` command to perform gestures in mobile platform tests. @@ -22,13 +22,13 @@ The main actions you can use are: interact with web apps. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.touchAction(action); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -40,7 +40,7 @@ await browser.touchAction(action);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript it("should do a touch gesture", async ({ browser }) => { @@ -79,7 +79,7 @@ it("should do a touch gesture", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [element.touchAction](../../element/touchAction) diff --git a/docs/commands/browser/uploadFile.mdx b/docs/commands/browser/uploadFile.mdx index ea77b008..ec87f255 100644 --- a/docs/commands/browser/uploadFile.mdx +++ b/docs/commands/browser/uploadFile.mdx @@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition"; # uploadFile -## Overview {#overview} +## Overview {/* #overview */} Use the `uploadFile` command to upload a file to a _[Selenium Standalone][selenium-file]_ server or to the browser via its driver (e.g., [Chromedriver][chromedriver]). @@ -12,13 +12,13 @@ Use the `uploadFile` command to upload a file to a _[Selenium Standalone][seleni currently implemented only in _Chrome_ and when running on [Selenium Grid][selenium-grid]. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.uploadFile(localPath); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -30,7 +30,7 @@ await browser.uploadFile(localPath);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} ```javascript const path = require("path"); diff --git a/docs/commands/browser/url.mdx b/docs/commands/browser/url.mdx index 09700335..79d45f52 100644 --- a/docs/commands/browser/url.mdx +++ b/docs/commands/browser/url.mdx @@ -1,6 +1,6 @@ # url -## Overview {#overview} +## Overview {/* #overview */} Use the `url` command to navigate to the specified URL in the browser. @@ -8,13 +8,13 @@ If [baseUrl][base-url] is specified in the configuration, it will be added to th Calling `browser.url()` with the same URL as before will reload the page. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.url(url); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -26,7 +26,7 @@ await browser.url(url);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} **url.js** diff --git a/docs/commands/browser/waitForStaticToLoad.mdx b/docs/commands/browser/waitForStaticToLoad.mdx index 9f4ee1b5..0969fc82 100644 --- a/docs/commands/browser/waitForStaticToLoad.mdx +++ b/docs/commands/browser/waitForStaticToLoad.mdx @@ -5,7 +5,7 @@ import Version from "../../_partials/specs/version.mdx"; -## Overview {#overview} +## Overview {/* #overview */} Use the `waitForStaticToLoad` command to wait for static elements on the page to load, such as fonts, CSS styles, and images. @@ -19,7 +19,7 @@ Automatically called when executing `assertView`. server, or if the element has a `crossorigin` attribute set to `anonymous`. -## Usage {#usage} +## Usage {/* #usage */} ```javascript const result = await browser.waitForStaticToLoad({ timeout: 5000, interval: 300 }); @@ -32,7 +32,7 @@ const result = await browser.waitForStaticToLoad({ timeout: 5000, interval: 300 // { ready: false, reason: "Resources are not loaded", pendingResources: ["https://example.com/image.jpg"] } ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -59,6 +59,6 @@ const result = await browser.waitForStaticToLoad({ timeout: 5000, interval: 300
-## Related Commands {#related} +## Related Commands {/* #related */} - [browser.assertView](../../browser/assertView) diff --git a/docs/commands/browser/waitUntil.mdx b/docs/commands/browser/waitUntil.mdx index 77b25538..ed432017 100644 --- a/docs/commands/browser/waitUntil.mdx +++ b/docs/commands/browser/waitUntil.mdx @@ -1,16 +1,16 @@ # waitUntil -## Overview {#overview} +## Overview {/* #overview */} Use the `waitUntil` command to wait for a specific condition to be met on the page in the browser. -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.waitUntil(condition, { timeout, timeoutMsg, interval }); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -25,7 +25,7 @@ await browser.waitUntil(condition, { timeout, timeoutMsg, interval });
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} **example.html** @@ -52,7 +52,7 @@ it("should wait until text has changed", async ({ browser }) => { }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [element.waitUntil](../../element/waitUntil) diff --git a/docs/commands/element/$$.mdx b/docs/commands/element/$$.mdx index 6f1216c9..896a658c 100644 --- a/docs/commands/element/$$.mdx +++ b/docs/commands/element/$$.mdx @@ -7,7 +7,7 @@ import Admonition from "@theme/Admonition"; # $$ -## Overview {#overview} +## Overview {/* #overview */} Use the `$$` command instead of [findElements][find-elements] as a shorter command to get multiple elements on the page within the scope of an element. This command is similar to the [browser.$$()](../../browser/_dollardollar) command but differs in that the search for elements will be among the children of the current element. @@ -16,13 +16,13 @@ Use the `$$` command instead of [findElements][find-elements] as a shorter comma selectors][how-to-use-selectors]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.$(selector).$$(subSelector); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -34,7 +34,7 @@ await browser.$(selector).$$(subSelector);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} **index.html** diff --git a/docs/commands/element/$.mdx b/docs/commands/element/$.mdx index ec7edc60..67fe1cff 100644 --- a/docs/commands/element/$.mdx +++ b/docs/commands/element/$.mdx @@ -7,7 +7,7 @@ import Admonition from "@theme/Admonition"; # $ -## Overview {#overview} +## Overview {/* #overview */} Use the `$` command instead of [findElement][find-element] as a shorter command to get a single element on the page. @@ -20,13 +20,13 @@ You can chain `$` or `$$` together to navigate down the DOM tree. But note that selectors][how-to-use-selectors]". -## Usage {#usage} +## Usage {/* #usage */} ```javascript await browser.$(selector); ``` -## Command Parameters {#parameters} +## Command Parameters {/* #parameters */} @@ -38,7 +38,7 @@ await browser.$(selector);
-## Usage Examples {#examples} +## Usage Examples {/* #examples */} **index.html** @@ -109,7 +109,7 @@ it("should use Android's DataMatcher or ViewMatcher selector", async ({ browser }); ``` -## Related Commands {#related} +## Related Commands {/* #related */} - [element.$$](../_dollardollar) - [browser.$](../../browser/_dollar) diff --git a/docs/commands/element/addValue.mdx b/docs/commands/element/addValue.mdx index d2989ba4..b5d60640 100644 --- a/docs/commands/element/addValue.mdx +++ b/docs/commands/element/addValue.mdx @@ -1,16 +1,16 @@ # addValue -## Overview {#overview} +## Overview {/* #overview */} Use the `addValue` command to add a value to an `` or `