From a93f786ba5b03aa26e4810b1c07edbff39e426e1 Mon Sep 17 00:00:00 2001
From: shadowusr <58862284+shadowusr@users.noreply.github.com>
Date: Thu, 18 Jul 2024 11:10:55 +0300
Subject: [PATCH] docs: add en versions of element commands (#18)

---
 .../current/commands/element/$$.mdx           |  98 ++++++++++
 .../current/commands/element/$.mdx            | 123 ++++++++++++
 .../current/commands/element/addValue.mdx     |  46 +++++
 .../current/commands/element/assertView.mdx   | 177 ++++++++++++++++++
 .../current/commands/element/clearValue.mdx   |  46 +++++
 .../current/commands/element/click.mdx        | 139 ++++++++++++++
 .../current/commands/element/doubleClick.mdx  |  36 ++++
 .../current/commands/element/dragAndDrop.mdx  |  43 +++++
 .../current/commands/element/getAttribute.mdx |  49 +++++
 .../commands/element/getCSSProperty.mdx       | 106 +++++++++++
 .../commands/element/getComputedLabel.mdx     |  27 +++
 .../commands/element/getComputedRole.mdx      |  27 +++
 .../current/commands/element/getHTML.mdx      |  53 ++++++
 .../current/commands/element/getLocation.mdx  |  46 +++++
 .../current/commands/element/getProperty.mdx  |  37 ++++
 .../current/commands/element/getSize.mdx      |  45 +++++
 .../current/commands/element/getTagName.mdx   |  33 ++++
 .../current/commands/element/getText.mdx      |  52 +++++
 .../current/commands/element/getValue.mdx     |  37 ++++
 .../current/commands/element/isClickable.mdx  |  49 +++++
 .../current/commands/element/isDisplayed.mdx  |  61 ++++++
 .../element/isDisplayedInViewport.mdx         |  49 +++++
 .../current/commands/element/isEnabled.mdx    |  45 +++++
 .../current/commands/element/isEqual.mdx      |  43 +++++
 .../current/commands/element/isExisting.mdx   |  61 ++++++
 .../current/commands/element/isFocused.mdx    |  40 ++++
 .../current/commands/element/isSelected.mdx   |  41 ++++
 .../current/commands/element/moveTo.mdx       |  32 ++++
 .../current/commands/element/nextElement.mdx  |  43 +++++
 .../commands/element/parentElement.mdx        |  43 +++++
 .../commands/element/previousElement.mdx      |  43 +++++
 .../current/commands/element/reactDollar.mdx  |  81 ++++++++
 .../commands/element/reactDollarDollar.mdx    |  62 ++++++
 .../commands/element/saveScreenshot.mdx       |  36 ++++
 .../commands/element/scrollIntoView.mdx       |  66 +++++++
 .../commands/element/selectByAttribute.mdx    |  64 +++++++
 .../commands/element/selectByIndex.mdx        |  59 ++++++
 .../commands/element/selectByVisibleText.mdx  |  59 ++++++
 .../current/commands/element/setValue.mdx     |  57 ++++++
 .../current/commands/element/shadowDollar.mdx |  42 +++++
 .../commands/element/shadowDollarDollar.mdx   |  42 +++++
 .../current/commands/element/touchAction.mdx  |  86 +++++++++
 .../commands/element/waitForClickable.mdx     |  53 ++++++
 .../commands/element/waitForDisplayed.mdx     |  66 +++++++
 .../commands/element/waitForEnabled.mdx       |  66 +++++++
 .../current/commands/element/waitForExist.mdx |  63 +++++++
 .../current/commands/element/waitUntil.mdx    |  65 +++++++
 47 files changed, 2737 insertions(+)
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/$$.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/$.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/addValue.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/assertView.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/clearValue.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/click.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/doubleClick.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/dragAndDrop.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getAttribute.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getCSSProperty.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedLabel.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedRole.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getHTML.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getLocation.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getProperty.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getSize.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getTagName.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getText.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/getValue.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isClickable.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayed.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayedInViewport.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEnabled.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEqual.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isExisting.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isFocused.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/isSelected.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/moveTo.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/nextElement.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/parentElement.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/previousElement.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollar.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollarDollar.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/saveScreenshot.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/scrollIntoView.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByAttribute.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByIndex.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByVisibleText.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/setValue.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollar.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollarDollar.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/touchAction.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForClickable.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForDisplayed.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForEnabled.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForExist.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitUntil.mdx

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$$.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$$.mdx
new file mode 100644
index 0000000..6f1216c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$$.mdx
@@ -0,0 +1,98 @@
+---
+slug: _dollardollar
+sidebar_label: $$
+---
+
+import Admonition from "@theme/Admonition";
+
+# $$
+
+## 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.
+
+<Admonition type="info">
+    Read more about how to select specific elements in the recipe "[How to use
+    selectors][how-to-use-selectors]".
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).$$(subSelector);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>subSelector</td><td>String or Function or Matcher</td><td>Selector, JS function, or Matcher object to get multiple elements.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<ul id="menu">
+    <li>
+        <a href="/">Home</a>
+    </li>
+    <li>
+        <a href="/">Developer Guide</a>
+    </li>
+    <li>
+        <a href="/">API</a>
+    </li>
+    <li>
+        <a href="/">Contribute</a>
+    </li>
+</ul>
+```
+
+**$$.js**
+
+```javascript
+it("should get text of a menu link", async ({ browser }) => {
+    const text = await browser.$("#menu");
+
+    console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
+});
+
+it("should get text of a menu link - JS Function", async ({ browser }) => {
+    const text = await browser.$("#menu");
+
+    console.log(
+        await text
+            .$$(function () {
+                // Arrow function cannot be used here.
+                // This is Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
+                // in this specific example – this is HTMLUListElement
+                //
+                // TypeScript users can do something like:
+                // return (this as Element).querySelector('li')
+                return this.querySelectorAll("li"); // Element[]
+            })[2]
+            .$("a")
+            .getText(),
+    ); // outputs: "API"
+});
+```
+
+## Related Commands
+
+-   [element.$](../_dollar)
+-   [browser.$](../../browser/_dollar)
+-   [browser.$$](../../browser/_dollardollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/$$), from which we drew some information while writing our version.
+
+[find-elements]: https://webdriver.io/docs/api/webdriver/#findelements
+[how-to-use-selectors]: https://webdriver.io/docs/selectors
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$.mdx
new file mode 100644
index 0000000..ec7edc6
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/$.mdx
@@ -0,0 +1,123 @@
+---
+slug: _dollar
+sidebar_position: 1
+---
+
+import Admonition from "@theme/Admonition";
+
+# $
+
+## Overview {#overview}
+
+Use the `$` command instead of [findElement][find-element] as a shorter command to get a single element on the page.
+
+The `$` command returns an object describing the element, on which you can call action commands without passing the selector. However, if you do pass a selector, it will first find the corresponding element and then call the action for that element. You can also pass an object as the selector, where the object contains the property `element-6066-11e4-a52e-4f735466cecf` with the value of the element reference. The command then converts the reference into an extended WebdriverIO element. Note: Use these element objects only if you are certain they exist on the page. This can be verified, for example, using the [isExisting](../isExisting) command.
+
+You can chain `$` or `$$` together to navigate down the DOM tree. But note that chaining `$` and `$$` commands makes sense only when using multiple selector strategies. Otherwise, you will be making unnecessary requests that will slow down the test (e.g., `$('body').$('div')` creates two requests, whereas `$('body div')` does the same in one request).
+
+<Admonition type="info">
+    Read more about how to select specific elements in the recipe "[How to use
+    selectors][how-to-use-selectors]".
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>selector</td><td>String or Function or Matcher</td><td>Selector, JS function, or Matcher object to get a specific element.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<ul id="menu">
+    <li>
+        <a href="/">Home</a>
+    </li>
+    <li>
+        <a href="/">Developer Guide</a>
+    </li>
+    <li>
+        <a href="/">API</a>
+    </li>
+    <li>
+        <a href="/">Contribute</a>
+    </li>
+</ul>
+```
+
+```javascript
+it("should get text of a menu link - JS Function", async ({ browser }) => {
+    const text = await browser.$("#menu");
+
+    console.log(
+        await text
+            .$$("li")[2]
+            .$(function () {
+                // Arrow function cannot be used here.
+                // This is Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
+                // in this specific example – this is HTMLLIElement
+                //
+                // TypeScript users can do something like:
+                // return (this as Element).querySelector('a')
+                return this.querySelector("a"); // Element
+            })
+            .getText(),
+    ); // outputs: "API"
+});
+
+it("should get text of a menu link", async ({ browser }) => {
+    const text = await browser.$("#menu");
+
+    console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
+});
+
+it("should allow to convert protocol result of an element into a WebdriverIO element", async ({
+    browser,
+}) => {
+    const activeElement = await browser.getActiveElement();
+
+    console.log(await browser.$(activeElement).getTagName()); // outputs the active element
+});
+
+it("should use Android's DataMatcher or ViewMatcher selector", async ({ browser }) => {
+    const menuItem = await browser.$({
+        name: "hasEntry",
+        args: ["title", "ViewTitle"],
+        class: "androidx.test.espresso.matcher.ViewMatchers",
+    });
+    await menuItem.click();
+
+    const menuItem = await browser.$({
+        name: "hasEntry",
+        args: ["title", "ViewTitle"],
+    });
+    await menuItem.click();
+});
+```
+
+## Related Commands {#related}
+
+-   [element.$$](../_dollardollar)
+-   [browser.$](../../browser/_dollar)
+-   [browser.$$](../../browser/_dollardollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/$), from which we drew some information while writing our version.
+
+[find-element]: https://webdriver.io/docs/api/webdriver/#findelement
+[how-to-use-selectors]: https://webdriver.io/docs/selectors
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/addValue.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/addValue.mdx
new file mode 100644
index 0000000..d2989ba
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/addValue.mdx
@@ -0,0 +1,46 @@
+# addValue
+
+## Overview {#overview}
+
+Use the `addValue` command to add a value to an `<input>` or `<textarea>` element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).addValue(value);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>value</td><td>String or Number</td><td>The value to add.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the addValue command", async ({ browser }) => {
+    let input = await browser.$(".input");
+    await input.addValue("test");
+    await input.addValue(123);
+
+    value = await input.getValue();
+    assert.equal(value, "test123"); // true
+});
+```
+
+## Related Commands {#related}
+
+-   [element.clearValue](../clearValue)
+-   [element.setValue](../setValue)
+-   [browser.keys](../../browser/keys)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/addValue), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/assertView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/assertView.mdx
new file mode 100644
index 0000000..f2ddb7f
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/assertView.mdx
@@ -0,0 +1,177 @@
+import Admonition from "@theme/Admonition";
+
+# assertView
+
+## Overview {#overview}
+
+Use the `assertView` command to take a screenshot of an element for a specific test state and compare it with a reference.
+
+<Admonition type="info">
+    This command is implemented within Testplane and is not available in the [API
+    WebDriverIO][webdriverio-api].
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).assertView(state, options);
+```
+
+<Admonition type="warning">
+    During execution, the _assertView_ command calls [waitForExist][wait-for-exist] with
+    [waitTimeout][wait-timeout] and [waitInterval][wait-interval].
+</Admonition>
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>[state](#state)</td><td>String</td><td>Required parameter. The name of the test state. It must be unique within a single test.</td></tr>
+<tr><td>[options](#options)</td><td>Object</td><td>Settings for the _assertView_ command.</td></tr>
+
+</tbody>
+</table>
+
+### state
+
+Required parameter. Specifies the name of the test state. The name must be unique within a single test.
+
+### options
+
+Specifies the settings for the `assertView` command:
+
+<table>
+    <thead>
+        <tr>
+            <td>**Option**</td>
+            <td>**Type**</td>
+            <td>**Description**</td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>ignoreElements</td>
+            <td>Array or String</td>
+            <td>
+                Elements (specified as selectors) to be ignored when comparing screenshots. Ignoring
+                is implemented by painting the listed elements black. For a single element, the
+                parameter can be set as a string.
+            </td>
+        </tr>
+        <tr>
+            <td>tolerance</td>
+            <td>Number</td>
+            <td>
+                Sensitivity to color differences. The value overrides
+                [browsers.tolerance][browsers-tolerance].
+            </td>
+        </tr>
+        <tr>
+            <td>antialiasingTolerance</td>
+            <td>Number</td>
+            <td>
+                Sensitivity to antialiasing. The value overrides
+                [browsers.antialiasingTolerance][browsers-antialiasing-tolerance].
+            </td>
+        </tr>
+        <tr>
+            <td>allowViewportOverflow</td>
+            <td>Boolean</td>
+            <td>
+                By default, Testplane throws an error if the element is outside the viewport
+                boundaries. This parameter disables boundary checks, allowing screenshots of
+                elements that don't fully fit in the viewport. Only the portions of the element
+                visible in the viewport will be shown in the screenshot. However, if
+                _compositeImage_ is set to _true_, the parts of the element below the viewport
+                boundary will also be visible in the screenshot. Similarly, if
+                _captureElementFromTop_ is set to _true_, the parts of the element above the
+                viewport boundary will also be captured in the screenshot.
+            </td>
+        </tr>
+        <tr>
+            <td>captureElementFromTop</td>
+            <td>Boolean</td>
+            <td>
+                Capture the screenshot of the element from the very top. If the element is outside
+                the viewport, it will be scrolled into view.
+            </td>
+        </tr>
+        <tr>
+            <td>compositeImage</td>
+            <td>Boolean</td>
+            <td>
+                If the element does not fit into the viewport, multiple screenshots of different
+                parts of the element will be taken sequentially and then stitched together into one
+                to display the entire element.
+            </td>
+        </tr>
+        <tr>
+            <td>screenshotDelay</td>
+            <td>Number</td>
+            <td>
+                Delay in milliseconds before taking a screenshot. Useful when there are elements
+                with animations on the page or a scrollbar that does not disappear immediately and
+                appears in the resulting screenshot.
+            </td>
+        </tr>
+        <tr>
+            <td>selectorToScroll</td>
+            <td>String</td>
+            <td>
+                Selector to scroll. Useful when you need to take a screenshot of a modal window that
+                doesn’t fit on the screen. Without specifying a selector, the scroll will be applied
+                to the _window_ object, scrolling the background and leaving the popup window in
+                place.
+            </td>
+        </tr>
+        <tr>
+            <td>disableAnimation</td>
+            <td>Boolean</td>
+            <td>
+                Disable animations and transitions when taking a screenshot. Default is `true`
+                starting from version `8.0.0`.
+            </td>
+        </tr>
+        <tr>
+            <td>ignoreDiffPixelCount</td>
+            <td>`` `${number}%` `` or Number</td>
+            <td>
+                The percentage of pixels to ignore during the diff. Useful to ignore very small
+                diffs. Default is `0`. Available starting from version `8.2.0`.
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.js**
+
+```javascript
+it("should assert view", async ({ browser }) => {
+    await browser.url("some/url");
+
+    const elem = await browser.$(".button");
+
+    await elem.assertView("plain");
+    await elem.click();
+    await elem.assertView("clicked");
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.assertView](../../browser/assertView)
+-   [browser.saveRecordingScreen](../../browser/saveRecordingScreen)
+-   [browser.saveScreenshot](../../browser/saveScreenshot)
+-   [element.saveScreenshot](../saveScreenshot)
+
+[webdriverio-api]: https://webdriver.io/docs/api
+[wait-for-exist]: ../waitForExist
+[wait-timeout]: ../../../config/browsers#wait_timeout
+[wait-interval]: ../../../config/browsers#wait_interval
+[browsers-tolerance]: ../../../config/browsers#tolerance
+[browsers-antialiasing-tolerance]: ../../../config/browsers#antialiasing_tolerance
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/clearValue.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/clearValue.mdx
new file mode 100644
index 0000000..c400fce
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/clearValue.mdx
@@ -0,0 +1,46 @@
+import Admonition from "@theme/Admonition";
+
+# clearValue
+
+## Overview {#overview}
+
+Use the `clearValue` command to clear the value of an `<input>` or `<textarea>` element.
+
+<Admonition type="warning">
+Make sure you can interact with the element before applying this command.
+
+You won't be able to clear the value of an element that is disabled or in read-only mode.
+
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).clearValue();
+```
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the clearValue command", async ({ browser }) => {
+    const elem = await browser.$(".input");
+    await elem.setValue("test123");
+
+    const value = await elem.getValue();
+    console.log(value); // outputs: 'test123'
+
+    await elem.clearValue();
+    value = await elem.getValue();
+    assert.equal(value, ""); // true
+});
+```
+
+## Related Commands {#related}
+
+-   [element.addValue](../addValue)
+-   [element.setValue](../setValue)
+-   [browser.keys](../../browser/keys)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/clearValue), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/click.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/click.mdx
new file mode 100644
index 0000000..93da2a0
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/click.mdx
@@ -0,0 +1,139 @@
+import Admonition from "@theme/Admonition";
+
+# click
+
+## Overview {#overview}
+
+Use the `click` command to click on an element.
+
+<Admonition type="warning">
+If you have elements with fixed positions (e.g., a fixed header or footer) that cover the selected element after scrolling to it, the click will be executed at the given coordinates but will be intercepted by your fixed (overlaying) element. In such cases, the following error is issued:
+
+_Element is not clickable at point (x, x). Other element would receive the click: ..._
+
+To bypass this, try finding the overlaying element and remove it using the [execute][execute] command, so it does not interfere with the click. You can also try to scroll the element manually using scroll offset to match your scenario.
+
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).click({ button, x, y, skipRelease });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>button</td><td>String or Number</td><td>The button to use for the click. Can be _0, 1, 2_ or _"left", "middle", "right"_ respectively.</td></tr>
+<tr><td>x</td><td>Number</td><td>The x-coordinate to click.</td></tr>
+<tr><td>y</td><td>Number</td><td>The y-coordinate to click.</td></tr>
+<tr><td>skipRelease</td><td>Boolean</td><td>If _true_, no _releaseActions_ will be sent after the click.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+### Example 1
+
+**example-1.html**
+
+```javascript
+<button id="myButton" onclick="document.getElementById('someText').innerHTML='I was clicked'">Click me</button>
+<div id="someText">I was not clicked</div>
+```
+
+**click-1.js**
+
+```javascript
+it("should demonstrate the click command", async ({ browser }) => {
+    const myButton = await browser.$("#myButton");
+    await myButton.click();
+
+    const myText = await browser.$("#someText");
+    const text = await myText.getText();
+
+    assert.equal(text, "I was clicked"); // true
+});
+```
+
+**example-1.js**
+
+```javascript
+it("should fetch menu links and visit each page", async ({ browser }) => {
+    const links = await browser.$$("#menu a");
+
+    for (let link of links) {
+        await link.click();
+    }
+});
+```
+
+### Example 2
+
+**example-2.html**
+
+```javascript
+<button id="myButton">Click me</button>
+```
+
+**example-2.js**
+
+```javascript
+it("should demonstrate a click using an offset", async ({ browser }) => {
+    const myButton = await browser.$("#myButton");
+
+    // Click 30 horizontal pixels
+    // from the button's position (from the center of the element)
+    await myButton.click({ x: 30 });
+});
+```
+
+### Example 3
+
+**example-3.html**
+
+```javascript
+<button id="myButton">Click me</button>
+```
+
+**example-3.js**
+
+```javascript
+it("should demonstrate a right click passed as string", async ({ browser }) => {
+    const myButton = await browser.$("#myButton");
+
+    // Open context menu at the button's location
+    await myButton.click({ button: "right" });
+});
+
+it("should demonstrate a right click passed as number while adding an offset", async ({
+    browser,
+}) => {
+    const myButton = await browser.$("#myButton");
+
+    // Open context menu 30 horizontal and 40 vertical pixels
+    // from the button's position (from the center of the element)
+    await myButton.click({ button: 2, x: 30, y: 40 });
+});
+
+it("should skip sending releaseAction command that causes unexpected alert closure", async ({
+    browser,
+}) => {
+    const myButton = await browser.$("#myButton");
+
+    // Skip sending releaseActions
+    await myButton.click({ button: 2, x: 30, y: 40, skipRelease: true });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/click), from which we drew some information while writing our version.
+
+[execute]: ../../browser/execute
+[webdriver-click]: https://w3c.github.io/webdriver/#dfn-element-click
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/doubleClick.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/doubleClick.mdx
new file mode 100644
index 0000000..a421c9f
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/doubleClick.mdx
@@ -0,0 +1,36 @@
+# doubleClick
+
+## Overview {#overview}
+
+Use the `doubleClick` command to perform a double-click on an element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).doubleClick();
+```
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```javascript
+<button id="myButton" ondblclick="document.getElementById('someText').innerHTML='I was dblclicked'">Click me</button>
+<div id="someText">I was not clicked</div>
+```
+
+**doubleClick.js**
+
+```javascript
+it("should demonstrate the doubleClick command", async ({ browser }) => {
+    const myButton = await browser.$("#myButton");
+    await myButton.doubleClick();
+
+    const value = await myButton.getText();
+    assert.equal(value, "I was dblclicked"); // true
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/doubleClick), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/dragAndDrop.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/dragAndDrop.mdx
new file mode 100644
index 0000000..7a9d92b
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/dragAndDrop.mdx
@@ -0,0 +1,43 @@
+# dragAndDrop
+
+## Overview {#overview}
+
+Use the `dragAndDrop` command to drag an element to a specified target element or position.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).dragAndDrop(target, { duration });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>target</td><td>Element or DragAndDropCoordinate</td><td>Target element or an object with _x_ and _y_ coordinates.</td></tr>
+<tr><td>duration</td><td>Number</td><td>Timeout for dragging the element _(drag operation)_.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the dragAndDrop command", async ({ browser }) => {
+    const elem = await browser.$("#someElem");
+    const target = await browser.$("#someTarget");
+
+    // perform drag and drop to another element
+    await elem.dragAndDrop(target);
+
+    // perform drag and drop relative to the current position
+    await elem.dragAndDrop({ x: 100, y: 200 });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/dragAndDrop), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getAttribute.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getAttribute.mdx
new file mode 100644
index 0000000..1451c33
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getAttribute.mdx
@@ -0,0 +1,49 @@
+# getAttribute
+
+## Overview {#overview}
+
+Use the `getAttribute` command to retrieve an attribute from a DOM element based on the attribute name.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getAttribute(attributeName);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>attributeName</td><td>String</td><td>The name of the attribute to retrieve.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```javascript
+<form action="/submit" method="post" class="loginForm">
+    <input type="text" name="name" placeholder="username"></input>
+    <input type="text" name="password" placeholder="password"></input>
+    <input type="submit" name="submit" value="submit"></input>
+</form>
+```
+
+**getAttribute.js**
+
+```javascript
+it("should demonstrate the getAttribute command", async ({ browser }) => {
+    const form = await browser.$("form");
+    const attr = await form.getAttribute("method");
+    console.log(attr); // outputs: "post"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getAttribute), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getCSSProperty.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getCSSProperty.mdx
new file mode 100644
index 0000000..5d2ebb7
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getCSSProperty.mdx
@@ -0,0 +1,106 @@
+import Admonition from "@theme/Admonition";
+
+# getCSSProperty
+
+## Overview {#overview}
+
+Use the `getCSSProperty` command to get a CSS property from a DOM element selected by a given selector.
+
+The returned value is formatted for easy verification:
+
+-   Colors are converted using [rgb2hex][rgb-to-hex];
+-   All other properties are converted using [css-value][css-value].
+
+<Admonition type="warning">
+    Note that CSS shorthand properties (e.g., _background, font, border, margin, padding,
+    list-style, outline, pause, cue_) will be expanded to retrieve all the longhand properties,
+    leading to multiple _WebDriver_ calls. If you are interested in a specific longhand property, it
+    is recommended to request that instead.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getCSSProperty(cssProperty);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>cssProperty</td><td>String</td><td>The name of the CSS property.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```javascript
+<label
+    id="myLabel"
+    for="input"
+    style="color: #0088cc; font-family: helvetica, arial, freesans, clean, sans-serif; width: 100px"
+>
+    Some Label
+</label>
+```
+
+**getCSSProperty.js**
+
+```javascript
+it("should demonstrate the getCSSProperty command", async ({ browser }) => {
+    const elem = await browser.$("#myLabel");
+    const color = await elem.getCSSProperty("color");
+    console.log(color);
+    // outputs:
+    // {
+    //     property: 'color',
+    //     value: 'rgba(0, 136, 204, 1)',
+    //     parsed: {
+    //         hex: '#0088cc',
+    //         alpha: 1,
+    //         type: 'color',
+    //         rgba: 'rgba(0, 136, 204, 1)'
+    //     }
+    // }
+
+    const font = await elem.getCSSProperty("font-family");
+    console.log(font);
+    // outputs:
+    // {
+    //      property: 'font-family',
+    //      value: 'helvetica',
+    //      parsed: {
+    //          value: [ 'helvetica', 'arial', 'freesans', 'clean', 'sans-serif' ],
+    //          type: 'font',
+    //          string: 'helvetica, arial, freesans, clean, sans-serif'
+    //      }
+    // }
+
+    var width = await elem.getCSSProperty("width");
+    console.log(width);
+    // outputs:
+    // {
+    //     property: 'width',
+    //     value: '100px',
+    //     parsed: {
+    //         type: 'number',
+    //         string: '100px',
+    //         unit: 'px',
+    //         value: 100
+    //     }
+    // }
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getCSSProperty), from which we drew some information while writing our version.
+
+[rgb-to-hex]: https://github.com/christian-bromann/rgb2hex
+[css-value]: https://github.com/reworkcss/css-value
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedLabel.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedLabel.mdx
new file mode 100644
index 0000000..e51b497
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedLabel.mdx
@@ -0,0 +1,27 @@
+# getComputedLabel
+
+## Overview {#overview}
+
+Use the `getComputedLabel` command to get the computed [WAI-ARIA][wai-aria] label of an element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getComputedLabel();
+```
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the getComputedLabel command", async ({ browser }) => {
+    await browser.url("https://www.google.com/ncr");
+    const elem = await browser.$('*[name="q"]');
+    console.log(await elem.getComputedLabel()); // outputs: "Search"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getComputedLabel), from which we drew some information while writing our version.
+
+[wai-aria]: https://en.wikipedia.org/wiki/WAI-ARIA
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedRole.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedRole.mdx
new file mode 100644
index 0000000..982d078
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getComputedRole.mdx
@@ -0,0 +1,27 @@
+# getComputedRole
+
+## Overview {#overview}
+
+Use the `getComputedRole` command to get the computed [WAI-ARIA][wai-aria] role of an element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getComputedRole();
+```
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the getComputedRole command", async ({ browser }) => {
+    await browser.url("https://www.google.com/ncr");
+    const elem = await browser.$('*[name="q"]');
+    console.log(await elem.getComputedRole()); // outputs: "combobox"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getComputedRole), from which we drew some information while writing our version.
+
+[wai-aria]: https://en.wikipedia.org/wiki/WAI-ARIA
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getHTML.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getHTML.mdx
new file mode 100644
index 0000000..a2e74b8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getHTML.mdx
@@ -0,0 +1,53 @@
+# getHTML
+
+## Overview {#overview}
+
+Use the `getHTML` command to retrieve the HTML source code of a specified DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getHTML(includeSelectorTag);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>includeSelectorTag</td><td>Boolean</td><td>Optional parameter. Include the selector element's tag in the source code. Default: _true_.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="test">
+    <span>Lorem ipsum dolor amet</span>
+</div>
+```
+
+**getHTML.js**
+
+```javascript
+it("should get html for certain elements", async ({ browser }) => {
+    var outerHTML = await browser.$("#test").getHTML();
+    console.log(outerHTML);
+    // outputs:
+    // "<div id="test"><span>Lorem ipsum dolor amet</span></div>"
+
+    var innerHTML = await browser.$("#test").getHTML(false);
+    console.log(innerHTML);
+    // outputs:
+    // "<span>Lorem ipsum dolor amet</span>"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getHTML), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getLocation.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getLocation.mdx
new file mode 100644
index 0000000..ca5f028
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getLocation.mdx
@@ -0,0 +1,46 @@
+# getLocation
+
+## Overview {#overview}
+
+Use the `getLocation` command to determine the location of an element on the page.
+
+The point `(0, 0)` refers to the top left corner of the page.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getLocation(prop);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>prop</td><td>String</td><td>Optional parameter. Can be "x" or "y" to directly get the desired value for simpler checks. If not specified, the command returns an object of the form _\{ x, y }_.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the getLocation function", async ({ browser }) => {
+    await browser.url("http://github.com");
+    const logo = await browser.$(".octicon-mark-github");
+    const location = await logo.getLocation();
+    console.log(location); // outputs: { x: 150, y: 20 }
+
+    const xLocation = await logo.getLocation("x");
+    console.log(xLocation); // outputs: 150
+
+    const yLocation = await logo.getLocation("y");
+    console.log(yLocation); // outputs: 20
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getLocation), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getProperty.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getProperty.mdx
new file mode 100644
index 0000000..9f3970e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getProperty.mdx
@@ -0,0 +1,37 @@
+# getProperty
+
+## Overview {#overview}
+
+Use the `getProperty` command to retrieve a property of an element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getProperty(property);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>property</td><td>String</td><td>The name of the element's property.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the getProperty command", async ({ browser }) => {
+    var elem = await browser.$("body");
+    var tag = await elem.getProperty("tagName");
+    console.log(tag); // outputs: "BODY"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getProperty), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getSize.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getSize.mdx
new file mode 100644
index 0000000..b40d9b2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getSize.mdx
@@ -0,0 +1,45 @@
+# getSize
+
+## Overview {#overview}
+
+Use the `getSize` command to get the width and height of a DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getSize(prop);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>prop</td><td>String</td><td>Optional parameter. The size to retrieve: "width" or "height". If not specified, the command will return an object of the form _\{ width, height }_.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the getSize command", async ({ browser }) => {
+    await browser.url("http://github.com");
+    const logo = await browser.$(".octicon-mark-github");
+
+    const size = await logo.getSize();
+    console.log(size); // outputs: { width: 32, height: 32 }
+
+    const width = await logo.getSize("width");
+    console.log(width); // outputs: 32
+
+    const height = await logo.getSize("height");
+    console.log(height); // outputs: 32
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getSize), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getTagName.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getTagName.mdx
new file mode 100644
index 0000000..4d97f1e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getTagName.mdx
@@ -0,0 +1,33 @@
+# getTagName
+
+## Overview {#overview}
+
+Use the `getTagName` command to get the tag name of a DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getTagName();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="elem">Lorem ipsum</div>
+```
+
+**getTagName.js**
+
+```javascript
+it("should demonstrate the getTagName command", async ({ browser }) => {
+    const tagName = await browser.$("#elem").getTagName();
+
+    console.log(tagName); // outputs: "div"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getTagName), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getText.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getText.mdx
new file mode 100644
index 0000000..780a1f2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getText.mdx
@@ -0,0 +1,52 @@
+# getText
+
+## Overview {#overview}
+
+Use the `getText` command to retrieve the text content from a DOM element.
+
+Ensure that the element from which you want to request text is [interactable][interactable], otherwise, the command will return an empty string. If the element is disabled or not visible and you still want to get its text content, use the [getHTML](../getHTML) command as a workaround.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getText();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="elem">
+    Lorem ipsum <strong>dolor</strong> sit amet,<br />
+    consetetur sadipscing elitr
+</div>
+<span style="display: none">I am invisible</span>
+```
+
+**getText.js**
+
+```javascript
+it("should demonstrate the getText function", async ({ browser }) => {
+    console.log(await browser.$("#elem").getText());
+    // outputs: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
+
+    console.log(await browser.$("span").getText());
+    // outputs: "" (empty string) because the element is not interactable
+});
+
+it("get content from table cell", async ({ browser }) => {
+    await browser.url("http://the-internet.herokuapp.com/tables");
+
+    const rows = await browser.$$("#table1 tr");
+    const columns = await rows[1].$$("td"); // get columns of the 2nd row
+
+    console.log(await columns[2].getText()); // get text from the 3rd column
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getText), from which we drew some information while writing our version.
+
+[interactable]: https://www.w3.org/TR/webdriver/#interactability
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getValue.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getValue.mdx
new file mode 100644
index 0000000..8bff334
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/getValue.mdx
@@ -0,0 +1,37 @@
+# getValue
+
+## Overview {#overview}
+
+Use the `getValue` command to get the value of a `<textarea>`, `<select>`, or `<input>` element of type `text` for the specified selector.
+
+If multiple elements are found for the given selector, the command will return an array of values.
+
+To get the values of `<input>` elements of type `checkbox` or `radio`, use the [isSelected](../isSelected) command.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).getValue();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<input type="text" value="John Doe" id="username" />
+```
+
+**getValue.js**
+
+```javascript
+it("should demonstrate the getValue command", async ({ browser }) => {
+    const value = await browser.$("#username").getValue();
+
+    console.log(value); // outputs: "John Doe"
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/getValue), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isClickable.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isClickable.mdx
new file mode 100644
index 0000000..7253ab7
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isClickable.mdx
@@ -0,0 +1,49 @@
+import Admonition from "@theme/Admonition";
+
+# isClickable
+
+## Overview {#overview}
+
+Use the `isClickable` command to determine whether a given DOM element is clickable.
+
+The command returns `true` if the selected DOM element:
+
+-   exists
+-   is visible
+-   is within the viewport (if not, try scrolling to the element)
+-   has its center unobstructed by another element
+-   is not disabled
+
+Otherwise, the command returns `false`.
+
+<Admonition type="warning">
+The _isClickable_ command works only in a web browser and in the _webview_ context of mobile applications.
+
+The command does not work in the native context of mobile applications.
+
+Additionally, unlike other element commands, Testplane will not wait for the element to exist before executing this command.
+
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isClickable();
+```
+
+## Usage Examples {#examples}
+
+```javascript
+it("should detect if an element is clickable", async ({ browser }) => {
+    const el = await browser.$("#el");
+    let clickable = await el.isClickable();
+    console.log(clickable); // outputs: true or false
+
+    // wait until the element is clickable
+    await browser.waitUntil(() => el.isClickable());
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isClickable), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayed.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayed.mdx
new file mode 100644
index 0000000..9a86134
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayed.mdx
@@ -0,0 +1,61 @@
+import Admonition from "@theme/Admonition";
+
+# isDisplayed
+
+## Overview {#overview}
+
+Use the `isDisplayed` command to determine whether a given DOM element is displayed.
+
+The command returns `true` if the selected DOM element is displayed; otherwise, it returns `false`.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isDisplayed();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="notDisplayed" style="display: none"></div>
+<div id="notVisible" style="visibility: hidden"></div>
+<div id="notInViewport" style="position:absolute; left: 9999999"></div>
+<div id="zeroOpacity" style="opacity: 0"></div>
+```
+
+**isDisplayed.js**
+
+```javascript
+it("should detect if an element is displayed", async ({ browser }) => {
+    let elem = await browser.$("#notDisplayed");
+    let isDisplayed = await elem.isDisplayed();
+    console.log(isDisplayed); // outputs: false
+
+    elem = await browser.$("#notVisible");
+    isDisplayed = await elem.isDisplayed();
+    console.log(isDisplayed); // outputs: false
+
+    elem = await browser.$("#notExisting");
+    isDisplayed = await elem.isDisplayed();
+    console.log(isDisplayed); // outputs: false
+
+    elem = await browser.$("#notInViewport");
+    isDisplayed = await elem.isDisplayed();
+    console.log(isDisplayed); // outputs: true
+
+    elem = await browser.$("#zeroOpacity");
+    isDisplayed = await elem.isDisplayed();
+    console.log(isDisplayed); // outputs: true
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isDisplayed), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayedInViewport.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayedInViewport.mdx
new file mode 100644
index 0000000..de8f743
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isDisplayedInViewport.mdx
@@ -0,0 +1,49 @@
+# isDisplayedInViewport
+
+## Overview {#overview}
+
+Use the `isDisplayedInViewport` command to determine whether a given DOM element is displayed within the viewport.
+
+The command returns `true` if the selected DOM element is partially visible and within the viewport; otherwise, it returns `false`.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isDisplayedInViewport();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="notDisplayed" style="display: none"></div>
+<div id="notVisible" style="visibility: hidden"></div>
+<div id="notInViewport" style="position:absolute; left: 9999999"></div>
+<div id="zeroOpacity" style="opacity: 0"></div>
+```
+
+**isDisplayedInViewport.js**
+
+```javascript
+it("should detect if an element is visible", async ({ browser }) => {
+    let isDisplayedInViewport = await browser.$("#notDisplayed").isDisplayedInViewport();
+    console.log(isDisplayedInViewport); // outputs: false
+
+    isDisplayedInViewport = await browser.$("#notVisible").isDisplayedInViewport();
+    console.log(isDisplayedInViewport); // outputs: false
+
+    isDisplayedInViewport = await browser.$("#notExisting").isDisplayedInViewport();
+    console.log(isDisplayedInViewport); // outputs: false
+
+    isDisplayedInViewport = await browser.$("#notInViewport").isDisplayedInViewport();
+    console.log(isDisplayedInViewport); // outputs: false
+
+    isDisplayedInViewport = await browser.$("#zeroOpacity").isDisplayedInViewport();
+    console.log(isDisplayedInViewport); // outputs: false
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isDisplayedInViewport), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEnabled.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEnabled.mdx
new file mode 100644
index 0000000..70f4616
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEnabled.mdx
@@ -0,0 +1,45 @@
+# isEnabled
+
+## Overview {#overview}
+
+Use the `isEnabled` command to determine whether a given DOM element is enabled.
+
+The command returns `true` if the DOM element is enabled; otherwise, it returns `false`.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isEnabled();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<input type="text" name="inputField" class="input1" />
+<input type="text" name="inputField" class="input2" disabled />
+<input type="text" name="inputField" class="input3" disabled="disabled" />
+```
+
+**isEnabled.js**
+
+```javascript
+it("should detect if an element is enabled", async ({ browser }) => {
+    let elem = await browser.$(".input1");
+    let isEnabled = await elem.isEnabled();
+    console.log(isEnabled); // outputs: true
+
+    elem = await browser.$(".input2");
+    isEnabled = await elem.isEnabled();
+    console.log(isEnabled); // outputs: false
+
+    elem = await browser.$(".input3");
+    isEnabled = await elem.isEnabled();
+    console.log(isEnabled); // outputs: false
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isEnabled), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEqual.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEqual.mdx
new file mode 100644
index 0000000..bad8192
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isEqual.mdx
@@ -0,0 +1,43 @@
+# isEqual
+
+## Overview {#overview}
+
+Use the `isEqual` command to compare a specified DOM element with another element.
+
+The command returns `true` if the selected element matches the provided one; otherwise, it returns `false`.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isEqual(el);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>el</td><td>Element</td><td>The element to compare with.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should detect if an element is equal to another", async ({ browser }) => {
+    const el = await browser.$("#el");
+
+    const sameEl = await browser.$("#el");
+    const anotherEl = await browser.$("#anotherEl");
+
+    el.isEqual(sameEl); // outputs: true
+    el.isEqual(anotherEl); // outputs: false
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isEqual), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isExisting.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isExisting.mdx
new file mode 100644
index 0000000..6ddb61a
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isExisting.mdx
@@ -0,0 +1,61 @@
+import Admonition from "@theme/Admonition";
+
+# isExisting
+
+## Overview {#overview}
+
+Use the `isExisting` command to determine whether a given DOM element exists.
+
+The command returns `true` if the selected element exists, otherwise it returns `false`.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isExisting();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="notDisplayed" style="display: none"></div>
+<div id="notVisible" style="visibility: hidden"></div>
+<div id="notInViewport" style="position:absolute; left: 9999999"></div>
+<div id="zeroOpacity" style="opacity: 0"></div>
+```
+
+**isExisting.js**
+
+```javascript
+it("should detect if elements are existing", async ({ browser }) => {
+    let elem = await browser.$("#someRandomNonExistingElement");
+    let isExisting = await elem.isExisting();
+    console.log(isExisting); // outputs: false
+
+    elem = await browser.$("#notDisplayed");
+    isExisting = await elem.isExisting();
+    console.log(isExisting); // outputs: true
+
+    elem = await browser.$("#notVisible");
+    isExisting = await elem.isExisting();
+    console.log(isExisting); // outputs: true
+
+    elem = await browser.$("#notInViewport");
+    isExisting = await elem.isExisting();
+    console.log(isExisting); // outputs: true
+
+    elem = await browser.$("#zeroOpacity");
+    isExisting = await elem.isExisting();
+    console.log(isExisting); // outputs: true
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isExisting), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isFocused.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isFocused.mdx
new file mode 100644
index 0000000..295744e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isFocused.mdx
@@ -0,0 +1,40 @@
+# isFocused
+
+## Overview {#overview}
+
+Use the `isFocused` command to determine whether a given DOM element is focused.
+
+The command returns `true` if the selected element is focused; otherwise, it returns `false`.
+
+If multiple elements match the selector, the command returns `true` if at least one of the elements is focused.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isFocused();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<input name="login" autofocus="" />
+```
+
+**isFocused.js**
+
+```javascript
+it("should detect the focus of an element", async ({ browser }) => {
+    await browser.url("/");
+    const loginInput = await browser.$('[name="login"]');
+    console.log(await loginInput.isFocused()); // outputs: false
+
+    await loginInput.click();
+    console.log(await loginInput.isFocused()); // outputs: true
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isFocused), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isSelected.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isSelected.mdx
new file mode 100644
index 0000000..bccc1bd
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/isSelected.mdx
@@ -0,0 +1,41 @@
+# isSelected
+
+## Overview {#overview}
+
+Use the `isSelected` command to determine whether a given `<option>` or `<input>` element of type `checkbox` or `radio` is selected.
+
+The command returns `true` if the element is selected; otherwise, it returns `false`.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).isSelected();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<select name="selectbox" id="selectbox">
+    <option value="John Doe">John Doe</option>
+    <option value="Layla Terry" selected="selected">Layla Terry</option>
+    <option value="Bill Gilbert">Bill Gilbert</option>
+</select>
+```
+
+**isSelected.js**
+
+```javascript
+it("should detect if an element is selected", async ({ browser }) => {
+    let element = await browser.$('[value="Layla Terry"]');
+    console.log(await element.isSelected()); // outputs: true
+
+    element = await browser.$('[value="Bill Gilbert"]');
+    console.log(await element.isSelected()); // outputs: false
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/isSelected), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/moveTo.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/moveTo.mdx
new file mode 100644
index 0000000..165d22e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/moveTo.mdx
@@ -0,0 +1,32 @@
+# moveTo
+
+## Overview {#overview}
+
+Use the `moveTo` command to move the mouse by specified offsets along the X and Y axes relative to the specified element.
+
+If no element is specified, the movement will be executed relative to the current mouse cursor position.
+If an element is specified and no offsets are provided, the mouse will move to the center of the element.
+If the element is not visible, it will scroll into view.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).moveTo({ xOffset, yOffset });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>xOffset</td><td>Number</td><td>The X-axis offset relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.</td></tr>
+<tr><td>yOffset</td><td>Number</td><td>The Y-axis offset relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.</td></tr>
+
+</tbody>
+</table>
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/moveTo), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/nextElement.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/nextElement.mdx
new file mode 100644
index 0000000..d56a5c8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/nextElement.mdx
@@ -0,0 +1,43 @@
+# nextElement
+
+## Overview {#overview}
+
+Use the `nextElement` command to get the next sibling element of the selected DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).nextElement();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div class="parent">
+    <p>Sibling One</p>
+    <p>Sibling Two</p>
+    <p>Sibling Three</p>
+</div>
+```
+
+**nextElement.js**
+
+```javascript
+it("should get text from next sibling element", async ({ browser }) => {
+    const elem = await browser.$$("p");
+    const nextElement = await elem[1].nextElement();
+
+    console.log(await nextElement.getText()); // outputs: "Sibling Three"
+});
+```
+
+## Related Commands {#related}
+
+-   [parentElement](../parentElement)
+-   [previousElement](../previousElement)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/nextElement), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/parentElement.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/parentElement.mdx
new file mode 100644
index 0000000..c639aef
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/parentElement.mdx
@@ -0,0 +1,43 @@
+# parentElement
+
+## Overview {#overview}
+
+Use the `parentElement` command to get the parent element of the selected DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).parentElement();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div class="parent">
+    <p>Sibling One</p>
+    <p>Sibling Two</p>
+    <p>Sibling Three</p>
+</div>
+```
+
+**parentElement.js**
+
+```javascript
+it("should get class from parent element", async ({ browser }) => {
+    const elem = await browser.$$("p");
+    const parent = await elem[2].parentElement();
+
+    console.log(await parent.getAttribute("class")); // outputs: "parent"
+});
+```
+
+## Related Commands {#related}
+
+-   [previousElement](../previousElement)
+-   [nextElement](../nextElement)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/parentElement), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/previousElement.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/previousElement.mdx
new file mode 100644
index 0000000..a512a0d
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/previousElement.mdx
@@ -0,0 +1,43 @@
+# previousElement
+
+## Overview {#overview}
+
+Use the `previousElement` command to get the previous sibling element of the selected DOM element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).previousElement();
+```
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div class="parent">
+    <p>Sibling One</p>
+    <p>Sibling Two</p>
+    <p>Sibling Three</p>
+</div>
+```
+
+**previousElement.js**
+
+```javascript
+it("should get text from previous sibling element", async ({ browser }) => {
+    const elem = await browser.$$("p");
+    const previousElement = await elem[1].previousElement();
+
+    console.log(await previousElement.getText()); // outputs: "Sibling One"
+});
+```
+
+## Related Commands {#related}
+
+-   [parentElement](../parentElement)
+-   [nextElement](../nextElement)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/previousElement), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollar.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollar.mdx
new file mode 100644
index 0000000..bbe9d8f
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollar.mdx
@@ -0,0 +1,81 @@
+import Admonition from "@theme/Admonition";
+
+# react$
+
+## Overview {#overview}
+
+Use the `react$` command to find React components on the page by their actual name, while filtering them by props and state.
+
+<Admonition type="warning">
+The _react$_ command only works in applications that use _React v16.x._
+
+Read more about React selectors in the recipe "[How to use selectors][how-to-use-selectors]".
+
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).react$(reactComponentSelector, { props, state });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>reactComponentSelector</td><td>String</td><td>The React component selector.</td></tr>
+<tr><td>props</td><td>Object</td><td>React properties the component should have.</td></tr>
+<tr><td>state</td><td>Any or Any[]</td><td>React state the component should be in.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should calculate 7 * 6", async ({ browser }) => {
+    await browser.url("https://ahfarmer.github.io/calculator/");
+    const appWrapper = await browser.$("div#root");
+
+    await appWrapper
+        .react$("t", {
+            props: { name: "7" },
+        })
+        .click();
+
+    await appWrapper
+        .react$("t", {
+            props: { name: "x" },
+        })
+        .click();
+
+    await appWrapper
+        .react$("t", {
+            props: { name: "6" },
+        })
+        .click();
+
+    await appWrapper
+        .react$("t", {
+            props: { name: "=" },
+        })
+        .click();
+
+    console.log(await browser.$(".component-display").getText()); // outputs: "42"
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.react$](../../browser/reactDollar)
+-   [browser.react$$](../../browser/reactDollarDollar)
+-   [element.react$$](../reactDollarDollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/react$), from which we drew some information while writing our version.
+
+[how-to-use-selectors]: https://webdriver.io/docs/selectors
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollarDollar.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollarDollar.mdx
new file mode 100644
index 0000000..acbc36b
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/reactDollarDollar.mdx
@@ -0,0 +1,62 @@
+import Admonition from "@theme/Admonition";
+
+# react$$
+
+## 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.
+
+<Admonition type="warning">
+The _react$_ command only works in applications that use _React v16.x._
+
+Read more about React selectors in the recipe "[How to use selectors][how-to-use-selectors]".
+
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.react$$(reactComponentSelector, { props, state });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>reactComponentSelector</td><td>String</td><td>The React component selector.</td></tr>
+<tr><td>props</td><td>Object</td><td>React properties the component should have.</td></tr>
+<tr><td>state</td><td>Any or Any[]</td><td>React state the component should be in.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should calculate 7 * 6", async ({ browser }) => {
+    await browser.url("https://ahfarmer.github.io/calculator/");
+    const appWrapper = await browser.$("div#root");
+
+    const orangeButtons = await appWrapper.react$$("t", {
+        props: { orange: true },
+    });
+
+    console.log(await Promise.all(orangeButtons.map(btn => btn.getText())));
+    // outputs: "[ '÷', 'x', '-', '+', '=' ]"
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.react$](../../browser/reactDollar)
+-   [browser.react$$](../../browser/reactDollarDollar)
+-   [element.react$](../reactDollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/react$$), from which we drew some information while writing our version.
+
+[how-to-use-selectors]: https://webdriver.io/docs/selectors
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/saveScreenshot.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/saveScreenshot.mdx
new file mode 100644
index 0000000..781a626
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/saveScreenshot.mdx
@@ -0,0 +1,36 @@
+# saveScreenshot
+
+## Overview {#overview}
+
+Use the `saveScreenshot` command to save a screenshot of an element to a PNG file.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).saveScreenshot(filepath);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>filepath</td><td>String</td><td>The path to the screenshot relative to the execution directory (the .png extension is mandatory).</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should save a screenshot of the browser view", async ({ browser }) => {
+    const elem = await browser.$("#someElem");
+    await elem.saveScreenshot("./some/path/elemScreenshot.png");
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/saveScreenshot), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/scrollIntoView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/scrollIntoView.mdx
new file mode 100644
index 0000000..dee4337
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/scrollIntoView.mdx
@@ -0,0 +1,66 @@
+import Admonition from "@theme/Admonition";
+
+# scrollIntoView
+
+## Overview {#overview}
+
+Use the `scrollIntoView` command to scroll to a specified element.
+
+<Admonition type="info">Also see [Element.scrollIntoView()][scroll-into-view] on MDN.</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).scrollIntoView();
+```
+
+or
+
+```javascript
+await browser.$(selector).scrollIntoView(alignToTop);
+```
+
+or
+
+```javascript
+await browser.$(selector).scrollIntoView({ behavior, block, inline });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>alignToTop</td><td>Boolean</td><td>true</td><td>If _true_, the top of the element will be aligned to the top of the scrollable ancestor's visible area. Corresponds to _\{block: 'start', inline: 'nearest'}_. If _false_, the bottom of the element will be aligned to the bottom of the scrollable ancestor's visible area. Corresponds to _\{block: 'end', inline: 'nearest'}_.</td></tr>
+<tr><td>behavior</td><td>String</td><td>"auto"</td><td>Specifies the scrolling animation: "auto" or "smooth".</td></tr>
+<tr><td>block</td><td>String</td><td>"start"</td><td>Specifies vertical alignment: "start", "center", "end", or "nearest".</td></tr>
+<tr><td>inline</td><td>String</td><td>"nearest"</td><td>Specifies horizontal alignment: "start", "center", "end", or "nearest".</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should demonstrate the scrollIntoView command", async ({ browser }) => {
+    const elem = await browser.$("#myElement");
+
+    // scroll the element into view
+    await elem.scrollIntoView();
+
+    // scroll the element to the center of the viewport
+    await elem.scrollIntoView({ block: "center", inline: "center" });
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.scroll](../../browser/scroll)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/scrollIntoView), from which we drew some information while writing our version.
+
+[scroll-into-view]: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByAttribute.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByAttribute.mdx
new file mode 100644
index 0000000..9473140
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByAttribute.mdx
@@ -0,0 +1,64 @@
+# selectByAttribute
+
+## Overview {#overview}
+
+Use the `selectByAttribute` command to select an option by a specific attribute value.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).selectByAttribute(attribute, value);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>attribute</td><td>String</td><td>The attribute (of the option) by which to select the option.</td></tr>
+<tr><td>value</td><td>String or Number</td><td>The value (of the option) by which to select the option.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```html
+<select id="selectbox">
+    <option value="someValue0">uno</option>
+    <option value="someValue1">dos</option>
+    <option value="someValue2">tres</option>
+    <option value="someValue3">cuatro</option>
+    <option value="someValue4">cinco</option>
+    <option name="someName5" value="someValue5">seis</option>
+</select>
+```
+
+**selectByAttribute.js**
+
+```javascript
+it("should demonstrate the selectByAttribute command", async ({ browser }) => {
+    const selectBox = await browser.$("#selectbox");
+    const value = await selectBox.getValue();
+    console.log(value); // outputs: "someValue0"
+
+    await selectBox.selectByAttribute("value", "someValue3");
+    console.log(await selectBox.getValue()); // outputs: "someValue3"
+
+    await selectBox.selectByAttribute("name", "someName5");
+    console.log(await selectBox.getValue()); // outputs: "someValue5"
+});
+```
+
+## Related Commands {#related}
+
+-   [selectByIndex](../selectByIndex)
+-   [selectByVisibleText](../selectByVisibleText)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/selectByAttribute), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByIndex.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByIndex.mdx
new file mode 100644
index 0000000..acade1c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByIndex.mdx
@@ -0,0 +1,59 @@
+# selectByIndex
+
+## Overview {#overview}
+
+Use the `selectByIndex` command to select an option by a specific index.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).selectByIndex(index);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>index</td><td>Number</td><td>The index (of the option) by which to select the option.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```html
+<select id="selectbox">
+    <option value="someValue0">uno</option>
+    <option value="someValue1">dos</option>
+    <option value="someValue2">tres</option>
+    <option value="someValue3">cuatro</option>
+    <option value="someValue4">cinco</option>
+    <option value="someValue5">seis</option>
+</select>
+```
+
+**selectByIndex.js**
+
+```javascript
+it("should demonstrate the selectByIndex command", async ({ browser }) => {
+    const selectBox = await browser.$("#selectbox");
+    console.log(await selectBox.getValue()); // outputs: "someValue0"
+
+    await selectBox.selectByIndex(4);
+    console.log(await selectBox.getValue()); // outputs: "someValue4"
+});
+```
+
+## Related Commands {#related}
+
+-   [selectByAttribute](../selectByAttribute)
+-   [selectByVisibleText](../selectByVisibleText)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/selectByIndex), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByVisibleText.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByVisibleText.mdx
new file mode 100644
index 0000000..72cfd6e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/selectByVisibleText.mdx
@@ -0,0 +1,59 @@
+# selectByVisibleText
+
+## Overview {#overview}
+
+Use the `selectByVisibleText` command to select an option by its displayed text.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).selectByVisibleText(text);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>text</td><td>String or Number</td><td>The text (of the option) by which to select the option.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```html
+<select id="selectbox">
+    <option value="someValue0">uno</option>
+    <option value="someValue1">dos</option>
+    <option value="someValue2">tres</option>
+    <option value="someValue3">cuatro</option>
+    <option value="someValue4">cinco</option>
+    <option value="someValue5">seis</option>
+</select>
+```
+
+**selectByVisibleText.js**
+
+```javascript
+it("should demonstrate the selectByVisibleText command", async ({ browser }) => {
+    const selectBox = await browser.$("#selectbox");
+    console.log(await selectBox.getText("option:checked")); // outputs: "uno"
+
+    await selectBox.selectByVisibleText("cuatro");
+    console.log(await selectBox.getText("option:checked")); // outputs: "cuatro"
+});
+```
+
+## Related Commands {#related}
+
+-   [selectByAttribute](../selectByAttribute)
+-   [selectByIndex](../selectByIndex)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/selectByVisibleText), from which we drew some information while writing our version.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/setValue.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/setValue.mdx
new file mode 100644
index 0000000..8f8fe4c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/setValue.mdx
@@ -0,0 +1,57 @@
+import Admonition from "@theme/Admonition";
+
+# setValue
+
+## Overview {#overview}
+
+Use the `setValue` command to send a sequence of key presses to an element after first clearing the input field.
+
+If the element does not need to be cleared first, use the [addValue][add-value] command.
+
+<Admonition type="info">
+    If you want to use special characters, for example, to copy and paste a value from one input to
+    another, use the [keys][keys] command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).setValue(value);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>value</td><td>String or Number</td><td>The value to set.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should set value for a certain element", async ({ browser }) => {
+    const input = await browser.$(".input");
+    await input.setValue("test");
+    await input.setValue(123);
+
+    console.log(await input.getValue()); // outputs: '123'
+});
+```
+
+## Related Commands {#related}
+
+-   [element.addValue][add-value]
+-   [element.clearValue](../clearValue)
+-   [browser.keys][keys]
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/setValue), from which we drew some information while writing our version.
+
+[add-value]: ../addValue
+[keys]: ../../browser/keys
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollar.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollar.mdx
new file mode 100644
index 0000000..d334d86
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollar.mdx
@@ -0,0 +1,42 @@
+# shadow$
+
+## Overview {#overview}
+
+Use the `shadow$` command to access an element within the [ShadowRoot][shadow-root] of a given element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).shadow$(shadowSelector);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>shadowSelector</td><td>String or Function</td><td>Selector or JS function to get a specific element.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should return an element inside a ShadowRoot", async ({ browser }) => {
+    const innerEl = await browser.$(".input").shadow$("#innerEl");
+    console.log(await innerEl.getValue()); // outputs: 'test123'
+});
+```
+
+## Related Commands {#related}
+
+-   [shadow$$](../shadowDollarDollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/shadow$), from which we drew some information while writing our version.
+
+[shadow-root]: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollarDollar.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollarDollar.mdx
new file mode 100644
index 0000000..28574d5
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/shadowDollarDollar.mdx
@@ -0,0 +1,42 @@
+# shadow$$
+
+## Overview {#overview}
+
+Use the `shadow$$` command to access elements within the [ShadowRoot][shadow-root] of a given element.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).shadow$$(shadowSelector);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>shadowSelector</td><td>String or Function</td><td>Selector or JS function to get a specific element (or elements).</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should return elements inside a ShadowRoot", async ({ browser }) => {
+    const innerEl = await browser.$(".input").shadow$$("#innerEl");
+    console.log(await innerEl.getValue()); // outputs: 'test123'
+});
+```
+
+## Related Commands {#related}
+
+-   [shadow$](../shadowDollar)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/shadow$$), from which we drew some information while writing our version.
+
+[shadow-root]: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/touchAction.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/touchAction.mdx
new file mode 100644
index 0000000..74362f8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/touchAction.mdx
@@ -0,0 +1,86 @@
+import Admonition from "@theme/Admonition";
+
+# touchAction
+
+## Overview {#overview}
+
+<Admonition type="warning">
+    The `touchAction` command is deprecated. Please use [`action`](../../browser/action) command instead:
+    ```js
+    await browser.action('pointer', {
+        parameters: { pointerType: 'touch' }
+    });
+    ```
+</Admonition>
+
+Use the `touchAction` command to perform gestures in mobile platform tests.
+
+The command allows chaining ad hoc actions that will then be applied to the app element on the device.
+
+The main actions you can use are:
+
+-   **press** — requires an element or coordinates (x, y), or both
+-   **longPress** — requires an element or coordinates (x, y), or both
+-   **tap** — requires an element or coordinates (x, y), or both
+-   **moveTo** — requires absolute coordinates (x, y)
+-   **wait** — requires time in milliseconds
+-   **release** — no parameters needed
+
+<Admonition type="warning">
+    Currently, the `touchAction` command is only available for native apps and cannot be used for
+    interacting with web applications.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).touchAction(action);
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>action</td><td>Object</td><td>The action to perform.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should do a touch gesture", async ({ browser }) => {
+    const screen = await browser.$("//UITextbox");
+
+    // simple touch action on an element
+    await screen.touchAction("tap");
+
+    // simple touch action with x and y coordinates
+    // touch coordinates are 30px to the right and 20px down from the element center
+    await screen.touchAction({
+        action: "tap",
+        x: 30,
+        y: 20,
+    });
+
+    // multi action on an element (drag&drop)
+    await screen.touchAction(["press", { action: "moveTo", x: 200, y: 300 }, "release"]);
+
+    // drag&drop to another element
+    const otherElement = await browser.$("//UIAApplication[1]/UIAElement[2]");
+    await screen.touchAction(["press", { action: "moveTo", element: otherElement }, "release"]);
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.touchAction](../../browser/touchAction)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/touchAction), from which we drew some information while writing our version.
+
+[ad-hoc]: https://en.wikipedia.org/wiki/Ad_hoc
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForClickable.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForClickable.mdx
new file mode 100644
index 0000000..26275da
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForClickable.mdx
@@ -0,0 +1,53 @@
+import Admonition from "@theme/Admonition";
+
+# waitForClickable
+
+## Overview {#overview}
+
+Use the `waitForClickable` command to wait until an element becomes clickable or unclickable within a specified number of milliseconds.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).waitForClickable({ timeout, reverse, timeoutMsg, interval });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>timeout</td><td>Number</td><td>500</td><td>Timeout in milliseconds.</td></tr>
+<tr><td>reverse</td><td>Boolean</td><td>false</td><td>If _true_, the command will wait for the opposite condition: the element becomes unclickable.</td></tr>
+<tr><td>timeoutMsg</td><td>String</td><td>_N/A_</td><td>Error message to throw when the timeout is reached.</td></tr>
+<tr><td>interval</td><td>Number</td><td>[waitforInterval][wait-for-interval]</td><td>Interval in milliseconds between condition checks.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should detect when element is clickable", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForClickable({ timeout: 3000 });
+});
+
+it("should detect when element is no longer clickable", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForClickable({ reverse: true });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/waitForClickable), from which we drew some information while writing our version.
+
+[wait-for-interval]: ../../../config/browsers#wait_interval
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForDisplayed.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForDisplayed.mdx
new file mode 100644
index 0000000..b398053
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForDisplayed.mdx
@@ -0,0 +1,66 @@
+import Admonition from "@theme/Admonition";
+
+# waitForDisplayed
+
+## Overview {#overview}
+
+Use the `waitForDisplayed` command to wait until an element becomes displayed or not displayed within a specified number of milliseconds.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).waitForDisplayed({ timeout, reverse, timeoutMsg, interval });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>timeout</td><td>Number</td><td>500</td><td>Timeout in milliseconds.</td></tr>
+<tr><td>reverse</td><td>Boolean</td><td>false</td><td>If _true_, the command will wait for the opposite condition: the element becomes not displayed.</td></tr>
+<tr><td>timeoutMsg</td><td>String</td><td>_N/A_</td><td>Error message to throw when the timeout is reached.</td></tr>
+<tr><td>interval</td><td>Number</td><td>[waitforInterval][wait-for-interval]</td><td>Interval in milliseconds between condition checks.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="elem" style="visibility: hidden;">Hello World!</div>
+<script type="text/javascript">
+    setTimeout(() => {
+        document.getElementById("elem").style.visibility = "visible";
+    }, 2000);
+</script>
+```
+
+**waitForDisplayed.js**
+
+```javascript
+it("should detect when element is visible", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForDisplayed({ timeout: 3000 });
+});
+
+it("should detect when element is no longer visible", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForDisplayed({ reverse: true });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/waitForDisplayed), from which we drew some information while writing our version.
+
+[wait-for-interval]: ../../../config/browsers#wait_interval
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForEnabled.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForEnabled.mdx
new file mode 100644
index 0000000..2376413
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForEnabled.mdx
@@ -0,0 +1,66 @@
+import Admonition from "@theme/Admonition";
+
+# waitForEnabled
+
+## Overview {#overview}
+
+Use the `waitForEnabled` command to wait until an element becomes enabled or disabled within a specified number of milliseconds.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).waitForEnabled({ timeout, reverse, timeoutMsg, interval });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>timeout</td><td>Number</td><td>500</td><td>Timeout in milliseconds.</td></tr>
+<tr><td>reverse</td><td>Boolean</td><td>false</td><td>If _true_, the command will wait for the opposite condition: the element becomes disabled.</td></tr>
+<tr><td>timeoutMsg</td><td>String</td><td>_N/A_</td><td>Error message to throw when the timeout is reached.</td></tr>
+<tr><td>interval</td><td>Number</td><td>[waitforInterval][wait-for-interval]</td><td>Interval in milliseconds between condition checks.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**index.html**
+
+```html
+<div id="elem" style="visibility: hidden;">Hello World!</div>
+<script type="text/javascript">
+    setTimeout(() => {
+        document.getElementById("elem").style.visibility = "visible";
+    }, 2000);
+</script>
+```
+
+**waitForEnabled.js**
+
+```javascript
+it("should detect when element is visible", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForDisplayed({ timeout: 3000 });
+});
+
+it("should detect when element is no longer visible", async ({ browser }) => {
+    const elem = await browser.$("#elem");
+    await elem.waitForDisplayed({ reverse: true });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/waitForEnabled), from which we drew some information while writing our version.
+
+[wait-for-interval]: ../../../config/browsers#wait_interval
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForExist.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForExist.mdx
new file mode 100644
index 0000000..0075120
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitForExist.mdx
@@ -0,0 +1,63 @@
+import Admonition from "@theme/Admonition";
+
+# waitForExist
+
+## Overview {#overview}
+
+Use the `waitForExist` command to wait until an element appears in the DOM within a specified number of milliseconds.
+
+The command returns `true` if the selector matches at least one element existing in the DOM; otherwise, it throws an error. If the `reverse` parameter is set to `true`, the command reverses its logic and returns `true` if the selector matches no elements.
+
+<Admonition type="warning">
+    Unlike other element commands, Testplane will not wait for the element to exist before executing
+    this command.
+</Admonition>
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).waitForExist({ timeout, reverse, timeoutMsg, interval });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>timeout</td><td>Number</td><td>500</td><td>Timeout in milliseconds.</td></tr>
+<tr><td>reverse</td><td>Boolean</td><td>false</td><td>If _true_, the command will wait for the opposite condition: the element does not exist.</td></tr>
+<tr><td>timeoutMsg</td><td>String</td><td>_N/A_</td><td>Error message to throw when the timeout is reached.</td></tr>
+<tr><td>interval</td><td>Number</td><td>[waitforInterval][wait-for-interval]</td><td>Interval in milliseconds between condition checks.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+```javascript
+it("should display a notification message after successful form submit", async ({ browser }) => {
+    const form = await browser.$("form");
+    const notification = await browser.$(".notification");
+
+    await form.$(".send").click();
+    await notification.waitForExist({ timeout: 5000 });
+
+    assert.equal(await notification.getText(), "Data transmitted successfully!");
+});
+
+it("should remove a message after successful form submit", async ({ browser }) => {
+    const form = await browser.$("form");
+    const message = await browser.$(".message");
+
+    await form.$(".send").click();
+    await message.waitForExist({ reverse: true });
+});
+```
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/waitForExist), from which we drew some information while writing our version.
+
+[wait-for-interval]: ../../../config/browsers#wait_interval
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitUntil.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitUntil.mdx
new file mode 100644
index 0000000..289aa71
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/element/waitUntil.mdx
@@ -0,0 +1,65 @@
+# waitUntil
+
+## Overview {#overview}
+
+Use the `waitUntil` command to wait until a specific condition is met on the page in the browser.
+
+## Usage {#usage}
+
+```javascript
+await browser.$(selector).waitUntil(condition, { timeout, timeoutMsg, interval });
+```
+
+## Command Parameters {#parameters}
+
+<table>
+<thead>
+<tr><td>**Name**</td><td>**Type**</td><td>**Default**</td><td>**Description**</td></tr>
+</thead>
+<tbody>
+<tr><td>condition</td><td>Function</td><td>_N/A_</td><td>The condition to wait for.</td></tr>
+<tr><td>timeout</td><td>Number</td><td>5000</td><td>Timeout in milliseconds.</td></tr>
+<tr><td>timeoutMsg</td><td>String</td><td>_N/A_</td><td>Error message to throw when the timeout is reached.</td></tr>
+<tr><td>interval</td><td>Number</td><td>500</td><td>Interval in milliseconds between condition checks.</td></tr>
+
+</tbody>
+</table>
+
+## Usage Examples {#examples}
+
+**example.html**
+
+```html
+<div id="someText">I am some text</div>
+<script>
+    setTimeout(() => {
+        document.getElementById("someText").innerHTML = "I am now different";
+    }, 1000);
+</script>
+```
+
+**waitUntil.js**
+
+```javascript
+it("should wait until text has changed", async ({ browser }) => {
+    const elem = await browser.$("#someText");
+
+    await elem.waitUntil(
+        async function () {
+            return (await this.getText()) === "I am now different";
+        },
+        {
+            timeout: 5000,
+            timeoutMsg: "expected text to be different after 5s",
+        },
+    );
+});
+```
+
+## Related Commands {#related}
+
+-   [browser.waitUntil](../../browser/waitUntil)
+
+## References
+
+We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/waitUntil), from which we drew some information while writing our version.