codeceptjs 3.1.0 → 3.2.0

package/docs/helpers/Playwright.md

@@ -47,6 +47,7 @@ This helper should be configured in codecept.json or codecept.conf.js
 -   `basicAuth`: (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
 -   `windowSize`: (optional) default window size. Set a dimension like `640x480`.
 -   `userAgent`: (optional) user-agent string.
+-   `locale`: (optional) locale string. Example: 'en-GB', 'de-DE', 'fr-FR', ...
 -   `manualStart`:  - do not start browser before a test, start it manually inside a helper with `this.helpers["Playwright"]._startBrowser()`.
 -   `chromium`: (optional) pass additional chromium options
 -   `electron`: (optional) pass additional electron options
@@ -162,6 +163,19 @@ const { devices } = require('playwright');
 }
 ```
 
+#### Example #7: Launch test with a specifc user locale
+
+```js
+{
+ helpers: {
+  Playwright : {
+    url: "http://localhost",
+    locale: "fr-FR",
+  }
+ }
+}
+```
+
 Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
 
 ## Access From Helpers
@@ -1821,11 +1835,11 @@ I.waitForRequest(request => request.url() === 'http://example.com' && request.me
 
 ### waitForResponse
 
-Waits for a network request.
+Waits for a network response.
 
 ```js
 I.waitForResponse('http://example.com/resource');
-I.waitForResponse(request => request.url() === 'http://example.com' && request.method() === 'GET');
+I.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200);
 ```
 
 #### Parameters
@@ -1919,22 +1933,6 @@ I.waitToHide('#popup');
 -   `locator` **([string][9] | [object][7])** element located by CSS|XPath|strict locator.
 -   `sec` **[number][10]** (optional, `1` by default) time in seconds to wait 
 
-### waitUntil
-
-Waits for a function to return true (waits for 1sec by default).
-
-```js
-I.waitUntil(() => window.requests == 0);
-I.waitUntil(() => window.requests == 0, 5);
-```
-
-#### Parameters
-
--   `fn` **([function][11] | [string][9])** function which is executed in browser context.
--   `sec` **[number][10]** (optional, `1` by default) time in seconds to wait 
--   `timeoutMsg` **[string][9]** message to show in case of timeout fail. 
--   `interval` **[number][10]?**  
-
 ### waitUrlEquals
 
 Waits for the entire URL to match the expected

package/docs/helpers/Puppeteer.md

@@ -101,6 +101,8 @@ This helper should be configured in codecept.json or codecept.conf.js
 }
 ```
 
+> Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
+
 #### Example #5: Target URL with provided basic authentication
 
 ```js
@@ -115,7 +117,21 @@ This helper should be configured in codecept.json or codecept.conf.js
 }
 ```
 
-Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
+#### Troubleshooting
+
+Error Message:  `No usable sandbox!`
+
+When running Puppeteer on CI try to disable sandbox if you see that message
+
+    helpers: {
+     Puppeteer: {
+        url: 'http://localhost',
+        show: false,
+        chrome: {
+          args: ['--no-sandbox', '--disable-setuid-sandbox']
+        }
+      },
+    }
 
 ## Access From Helpers
 
@@ -1598,7 +1614,7 @@ I.seeTitleEquals('Test title.');
 
 #### Parameters
 
--   `text`  
+-   `text` **[string][8]** value to check.
 
 ### selectOption
 
@@ -1982,22 +1998,6 @@ I.waitToHide('#popup');
 -   `locator` **([string][8] | [object][6])** element located by CSS|XPath|strict locator.
 -   `sec` **[number][10]** (optional, `1` by default) time in seconds to wait 
 
-### waitUntil
-
-Waits for a function to return true (waits for 1sec by default).
-
-```js
-I.waitUntil(() => window.requests == 0);
-I.waitUntil(() => window.requests == 0, 5);
-```
-
-#### Parameters
-
--   `fn` **([function][12] | [string][8])** function which is executed in browser context.
--   `sec` **[number][10]** (optional, `1` by default) time in seconds to wait 
--   `timeoutMsg` **[string][8]** message to show in case of timeout fail. 
--   `interval` **[number][10]?**  
-
 ### waitUrlEquals
 
 Waits for the entire URL to match the expected

package/docs/helpers/REST.md

@@ -168,7 +168,7 @@ I.setRequestTimeout(10000); // In milliseconds
 
 #### Parameters
 
--   `newTimeout`  
+-   `newTimeout` **[number][5]** timeout in milliseconds
 
 [1]: https://github.com/axios/axios
 
@@ -177,3 +177,5 @@ I.setRequestTimeout(10000); // In milliseconds
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

package/docs/helpers/WebDriver.md

@@ -599,7 +599,7 @@ I.defineTimeout({ implicit: 10000, pageLoad: 10000, script: 5000 });
 
 #### Parameters
 
--   `timeouts` **WebdriverIO.Timeouts** WebDriver timeouts object.
+-   `timeouts` **any** WebDriver timeouts object.
 
 ### dontSee
 
@@ -963,7 +963,7 @@ let hint = await I.grabAttributeFrom('#tooltip', 'title');
 -   `locator` **([string][19] | [object][18])** element located by CSS|XPath|strict locator.
 -   `attr` **[string][19]** attribute name.
 
-Returns **[Promise][25]<[string][19]>** attribute valueAppium: can be used for apps only with several values ("contentDescription", "text", "className", "resourceId")
+Returns **[Promise][25]<[string][19]>** attribute value
 
 ### grabAttributeFromAll
 
@@ -979,7 +979,7 @@ let hints = await I.grabAttributeFromAll('.tooltip', 'title');
 -   `locator` **([string][19] | [object][18])** element located by CSS|XPath|strict locator.
 -   `attr` **[string][19]** attribute name.
 
-Returns **[Promise][25]<[Array][27]<[string][19]>>** attribute valueAppium: can be used for apps only with several values ("contentDescription", "text", "className", "resourceId")
+Returns **[Promise][25]<[Array][27]<[string][19]>>** attribute value
 
 ### grabBrowserLogs
 
@@ -2155,22 +2155,6 @@ I.waitToHide('#popup');
 -   `locator` **([string][19] | [object][18])** element located by CSS|XPath|strict locator.
 -   `sec` **[number][22]** (optional, `1` by default) time in seconds to wait 
 
-### waitUntil
-
-Waits for a function to return true (waits for 1sec by default).
-
-```js
-I.waitUntil(() => window.requests == 0);
-I.waitUntil(() => window.requests == 0, 5);
-```
-
-#### Parameters
-
--   `fn` **([function][24] | [string][19])** function which is executed in browser context.
--   `sec` **[number][22]** (optional, `1` by default) time in seconds to wait 
--   `timeoutMsg` **[string][19]** message to show in case of timeout fail. 
--   `interval` **[number][22]?**  
-
 ### waitUrlEquals
 
 Waits for the entire URL to match the expected

package/docs/mobile-react-native-locators.md

@@ -1,6 +1,9 @@
 ## Automating React Native apps
 
 ### Problem
+
+> ⚠️ **NOTE**: This problem is not actual starting from `react-native@0.65.x` [CHANGELOG](https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#android-specific-9), [#381fb3](https://github.com/facebook/react-native/commit/381fb395ad9d2d48717a5d082aaedbecdd804554)
+
 Let's say we have a React Native app with component defined like this
 ```html
 <Button testID='someButton'>My button</Button>

package/docs/playwright.md

@@ -406,6 +406,11 @@ When a test fails and video was enabled a video file is shown under the `artifac
 
 Open video and use it to debug a failed test case. Video helps when running tests on CI. Configure your CI system to enable artifacts storage for `output/video` and review videos of failed test case to understand failures. 
 
+It is recommended to enable [subtitles](https://codecept.io/plugins/#subtitles) plugin which will generate subtitles from steps in `.srt` format. Subtitles file will be saved into after a video file so video player (like VLC) would load them automatically:
+
+![](https://user-images.githubusercontent.com/220264/131644090-38d1ca55-1ba1-41fa-8fd1-7dea2b7ae995.png)
+
+
 ## Trace <Badge text="Since 3.1" type="warning"/>
 
 If video is not enough to descover why a test failed a [trace](https://playwright.dev/docs/trace-viewer/) can be recorded.
@@ -456,6 +461,41 @@ For instance, this is how you can read a trace for a failed test from an example
 npx playwright show-trace /home/davert/projects/codeceptjs/examples/output/trace/open.zip
 ```
 
+## Capturing Code Coverage
+
+Code coverage can be captured, by enabling the `coverage` plugin in `codecept.config.js`.
+
+```js
+{
+  plugins: {
+    coverage: {
+      enabled: true
+    }
+  }
+}
+```
+
+Once all the tests are completed, `codecept` will create and store coverage in `output/coverage` folder, as shown below.
+
+![](https://user-images.githubusercontent.com/16587779/131362352-30ee9c51-705f-4098-b665-53035ea9275f.png)
+
+Then you need to [convert code coverage from Playwright's format into Istanbul format](https://github.com/codeceptjs/CodeceptJS/wiki/Converting-Playwright-to-Istanbul-Coverage).
+
+Once the istanbul compatible coverage is generated, use [`nyc`](https://www.npmjs.com/package/nyc) to generate your coverage report in your desired format.
+
+```
+npx nyc report --reporter html -t coverage
+```
+
+The above command will generate will generate coverage in an interactive html format. It should generate `html` files in the directory where your code coverage is present, something like shown below.
+
+![](https://user-images.githubusercontent.com/16587779/131858419-cbc7df7d-0851-47b9-b086-b5e3b9165674.png)
+
+Open `index.html` in your browser to view the full interactive coverage report.
+
+![](https://user-images.githubusercontent.com/16587779/131858993-87d1aafc-8ef1-4a82-867d-e64a13e36106.png)
+
+![](https://user-images.githubusercontent.com/16587779/131859006-c6f17d18-c603-44a5-9d59-0670177276cf.png)
 ## Extending Helper
 
 To create custom `I.*` commands using Playwright API you need to create a custom helper.

package/docs/plugins.md

@@ -409,6 +409,29 @@ Scenario('project update test', async (I) => {
 
 -   `config`  
 
+## coverage
+
+Dumps code coverage from Playwright/Puppeteer after every test.
+
+#### Configuration
+
+```js
+plugins: {
+   coverage: {
+     enabled: true
+   }
+}
+```
+
+Possible config options:
+
+-   `coverageDir`: directory to dump coverage files
+-   `uniqueFileName`: generate a unique filename by adding uuid
+
+### Parameters
+
+-   `config`  
+
 ## customLocator
 
 Creates a [custom locator][3] by using special attributes in HTML.
@@ -441,7 +464,7 @@ Using `data-test` attribute with `$` prefix:
 // in codecept.conf.js
 plugins: {
  customLocator: {
-   enabled: true
+   enabled: true,
    attribute: 'data-test'
  }
 }
@@ -460,7 +483,7 @@ Using `data-qa` attribute with `=` prefix:
 // in codecept.conf.js
 plugins: {
  customLocator: {
-   enabled: true
+   enabled: true,
    prefix: '=',
    attribute: 'data-qa'
  }
@@ -536,45 +559,6 @@ Enable it manually on each run via `-p` option:
 
     npx codeceptjs run -p pauseOnFail
 
-## puppeteerCoverage
-
-Dumps puppeteers code coverage after every test.
-
-#### Configuration
-
-Configuration can either be taken from a corresponding helper (deprecated) or a from plugin config (recommended).
-
-```js
-plugins: {
-   puppeteerCoverage: {
-     enabled: true
-   }
-}
-```
-
-Possible config options:
-
--   `coverageDir`: directory to dump coverage files
--   `uniqueFileName`: generate a unique filename by adding uuid
-
-    First of all, your mileage may vary!
-
-    To work, you need the client javascript code to be NOT uglified. They need to be built in "development" mode.
-    And the end of your tests, you'll get a directory full of coverage per test run.  Now what?
-    You'll need to convert the coverage code to something istanbul can read.  Good news is someone wrote the code
-    for you (see puppeteer-to-istanbul link below).  Then using istanbul you need to combine the converted
-    coverage and create a report.  Good luck!
-
-    Links:
-
--   [https://github.com/GoogleChrome/puppeteer/blob/v1.12.2/docs/api.md#class-coverage][7]
--   [https://github.com/istanbuljs/puppeteer-to-istanbul][8]
--   [https://github.com/gotwarlost/istanbul][9]
-
-### Parameters
-
--   `config`  
-
 ## retryFailedStep
 
 Retries each failed step in a test.
@@ -642,6 +626,75 @@ Scenario('scenario tite', () => {
 
 -   `config`  
 
+## retryTo
+
+Adds global `retryTo` which retries steps a few times before failing.
+
+Enable this plugin in `codecept.conf.js` (enabled by default for new setups):
+
+```js
+plugins: {
+  retryTo: {
+    enabled: true
+  }
+}
+```
+
+Use it in your tests:
+
+```js
+// retry these steps 5 times before failing
+await retryTo((tryNum) => {
+  I.switchTo('#editor frame');
+  I.click('Open');
+  I.see('Opened')
+}, 5);
+```
+
+Set polling interval as 3rd argument (200ms by default):
+
+```js
+// retry these steps 5 times before failing
+await retryTo((tryNum) => {
+  I.switchTo('#editor frame');
+  I.click('Open');
+  I.see('Opened')
+}, 5, 100);
+```
+
+Default polling interval can be changed in a config:
+
+```js
+plugins: {
+  retryTo: {
+    enabled: true,
+    pollInterval: 500,
+  }
+}
+```
+
+Disables retryFailedStep plugin for steps inside a block;
+
+Use this plugin if:
+
+-   you need repeat a set of actions in flaky tests
+-   iframe was not rendered and you need to retry switching to it
+
+#### Configuration
+
+-   `pollInterval` - default interval between retries in ms. 200 by default.
+-   `registerGlobal` - to register `retryTo` function globally, true by default
+
+If `registerGlobal` is false you can use retryTo from the plugin:
+
+```js
+const retryTo = codeceptjs.container.plugins('retryTo');
+```
+
+### Parameters
+
+-   `config`  
+
 ## screenshotOnFail
 
 Creates screenshot on failure. Screenshot is saved into `output` directory.
@@ -673,14 +726,14 @@ Possible config options:
 
 ## selenoid
 
-[Selenoid][10] plugin automatically starts browsers and video recording.
+[Selenoid][7] plugin automatically starts browsers and video recording.
 Works with WebDriver helper.
 
 ### Prerequisite
 
 This plugin **requires Docker** to be installed.
 
-> If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][11] tool from Selenoid
+> If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][8] tool from Selenoid
 
 ### Usage
 
@@ -709,7 +762,7 @@ plugins: {
   }
 ```
 
-When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][12] and start Selenoid automatically.
+When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][9] and start Selenoid automatically.
 It will also create `browsers.json` file required by Selenoid.
 
 In automatic mode the latest version of browser will be used for tests. It is recommended to specify exact version of each browser inside `browsers.json` file.
@@ -721,10 +774,10 @@ In automatic mode the latest version of browser will be used for tests. It is re
 While this plugin can create containers for you for better control it is recommended to create and launch containers manually.
 This is especially useful for Continous Integration server as you can configure scaling for Selenoid containers.
 
-> Use [Selenoid Configuration Manager][11] to create and start containers semi-automatically.
+> Use [Selenoid Configuration Manager][8] to create and start containers semi-automatically.
 
 1.  Create `browsers.json` file in the same directory `codecept.conf.js` is located
-    [Refer to Selenoid documentation][13] to know more about browsers.json.
+    [Refer to Selenoid documentation][10] to know more about browsers.json.
 
 _Sample browsers.json_
 
@@ -749,7 +802,7 @@ _Sample browsers.json_
 
 2.  Create Selenoid container
 
-Run the following command to create a container. To know more [refer here][14]
+Run the following command to create a container. To know more [refer here][11]
 
 ```bash
 docker create                                    \
@@ -782,7 +835,7 @@ When `allure` plugin is enabled a video is attached to report automatically.
 | enableVideo      | Enable video recording and use `video` folder of output (default: false)       |
 | enableLog        | Enable log recording and use `logs` folder of output (default: false)          |
 | deletePassed     | Delete video and logs of passed tests (default : true)                         |
-| additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][15] to know more   |
+| additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][12] to know more   |
 
 ### Parameters
 
@@ -790,7 +843,7 @@ When `allure` plugin is enabled a video is attached to report automatically.
 
 ## stepByStepReport
 
-![step-by-step-report][16]
+![step-by-step-report][13]
 
 Generates step by step report for a test.
 After each step in a test a screenshot is created. After test executed screenshots are combined into slideshow.
@@ -818,11 +871,81 @@ Possible config options:
 -   `fullPageScreenshots`: should full page screenshots be used. Default: false.
 -   `output`: a directory where reports should be stored. Default: `output`.
 -   `screenshotsForAllureReport`: If Allure plugin is enabled this plugin attaches each saved screenshot to allure report. Default: false.
+-   \`disableScreenshotOnFail : Disables the capturing of screeshots after the failed step. Default: true.
 
 ### Parameters
 
 -   `config` **any** 
 
+## stepTimeout
+
+Set timeout for test steps globally.
+
+Add this plugin to config file:
+
+```js
+plugins: {
+    stepTimeout: {
+       enabled: true
+    }
+}
+```
+
+Run tests with plugin enabled:
+
+    npx codeceptjs run --plugins stepTimeout
+
+#### Configuration:
+
+-   `timeout` - global step timeout, default 150 seconds
+-   `force` - whether to use timeouts set in plugin config to override step timeouts set in code with I.limitTime(x).action(...), default false
+-   `noTimeoutSteps` - an array of steps with no timeout. Default:
+
+    -   `amOnPage`
+    -   `wait*`
+
+    you could set your own noTimeoutSteps which would replace the default one.
+
+-   `customTimeoutSteps` - an array of step actions with custom timeout. Use it to override or extend noTimeoutSteps.
+    You can use step names or step prefixes ending with `*`. As such, `wait*` will match all steps starting with `wait`.
+
+#### Example
+
+```js
+plugins: {
+    stepTimeout: {
+        enabled: true,
+        force: true,
+        noTimeoutSteps: [
+          'scroll*', // ignore all scroll steps
+          /Cookie/, // ignore all steps with a Cookie in it (by regexp)
+        ],
+        customTimeoutSteps: [
+          ['myFlakyStep*', 1],
+          ['scrollWhichRequiresTimeout', 5],
+        ]
+    }
+}
+```
+
+### Parameters
+
+-   `config`  
+
+## subtitles
+
+Automatically captures steps as subtitle, and saves it as an artifact when a video is found for a failed test
+
+#### Configuration
+
+```js
+plugins: {
+ subtitles: {
+   enabled: true
+ }
+}
+```
+
 ## tryTo
 
 Adds global `tryTo` function inside of which all failed steps won't fail a test but will return true/false.
@@ -897,7 +1020,7 @@ This plugin allows to run webdriverio services like:
 -   browserstack
 -   appium
 
-A complete list of all available services can be found on [webdriverio website][17].
+A complete list of all available services can be found on [webdriverio website][14].
 
 #### Setup
 
@@ -909,7 +1032,7 @@ See examples below:
 
 #### Selenium Standalone Service
 
-Install `@wdio/selenium-standalone-service` package, as [described here][18].
+Install `@wdio/selenium-standalone-service` package, as [described here][15].
 It is important to make sure it is compatible with current webdriverio version.
 
 Enable `wdio` plugin in plugins list and add `selenium-standalone` service:
@@ -928,7 +1051,7 @@ Please note, this service can be used with Protractor helper as well!
 
 #### Sauce Service
 
-Install `@wdio/sauce-service` package, as [described here][19].
+Install `@wdio/sauce-service` package, as [described here][16].
 It is important to make sure it is compatible with current webdriverio version.
 
 Enable `wdio` plugin in plugins list and add `sauce` service:
@@ -970,28 +1093,22 @@ In the same manner additional services from webdriverio can be installed, enable
 
 [6]: /basics/#pause
 
-[7]: https://github.com/GoogleChrome/puppeteer/blob/v1.12.2/docs/api.md#class-coverage
-
-[8]: https://github.com/istanbuljs/puppeteer-to-istanbul
-
-[9]: https://github.com/gotwarlost/istanbul
-
-[10]: https://aerokube.com/selenoid/
+[7]: https://aerokube.com/selenoid/
 
-[11]: https://aerokube.com/cm/latest/
+[8]: https://aerokube.com/cm/latest/
 
-[12]: https://hub.docker.com/u/selenoid
+[9]: https://hub.docker.com/u/selenoid
 
-[13]: https://aerokube.com/selenoid/latest/#_prepare_configuration
+[10]: https://aerokube.com/selenoid/latest/#_prepare_configuration
 
-[14]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
+[11]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
 
-[15]: https://docs.docker.com/engine/reference/commandline/create/
+[12]: https://docs.docker.com/engine/reference/commandline/create/
 
-[16]: https://codecept.io/img/codeceptjs-slideshow.gif
+[13]: https://codecept.io/img/codeceptjs-slideshow.gif
 
-[17]: https://webdriver.io
+[14]: https://webdriver.io
 
-[18]: https://webdriver.io/docs/selenium-standalone-service.html
+[15]: https://webdriver.io/docs/selenium-standalone-service.html
 
-[19]: https://webdriver.io/docs/sauce-service.html
+[16]: https://webdriver.io/docs/sauce-service.html

package/docs/reports.md

@@ -7,8 +7,8 @@ title: Reporters
 
 ## Cli
 
-By default CodeceptJS provides cli reporter with console output.
-Test names and failures will be printed to screen.
+By default, CodeceptJS provides cli reporter with console output.
+Test names and failures will be printed out on screen.
 
 ```sh
 GitHub --
@@ -33,8 +33,8 @@ GitHub --
   Run with --verbose flag to see NodeJS stacktrace
 
 ```
-npx codeceptjs run --stepsutput add `--steps` option to `run` command:
-```
+
+output steps use `--steps` option:
 ```
 npx codeceptjs run --steps
 ```
@@ -201,7 +201,7 @@ npx codeceptjs dry-run --debug -p allure
 
 ## ReportPortal
 
-Allure is a great reportin tool, however, if you are running tests on different machines it is hard to merge its XML result files to build a proper report. So, for enterprise grade reporting we recommend using [ReportPortal](https://reportportal.io).
+Allure is a great reporting tool, however, if you are running tests on different machines it is hard to merge its XML result files to build a proper report. So, for enterprise grade reporting we recommend using [ReportPortal](https://reportportal.io).
 
 ![](https://camo.githubusercontent.com/6550c0365f1d0ce1e29c53f1860b12957d1fc529/68747470733a2f2f692e6962622e636f2f516d353247306e2f53637265656e73686f742d323031392d30342d31312d61742d31352d35372d34302e706e67)
 
@@ -376,3 +376,21 @@ npx codeceptjs run --reporter mocha-multi
 ```
 
 This will give you cli with steps in console and HTML report in `output` directory.
+
+
+## Testrail
+
+Testrail integration with CodeceptJS is now so seamless. The test run is created automatically afterwards. The screenshots of failed tests are also attached to test results.
+
+Try to use [codeceptjs-testrail](https://www.npmjs.com/package/codeceptjs-testrail) plugin
+
+Install it via NPM:
+
+```sh
+npm i codeceptjs-testrail --save
+```
+
+![Attachemnt for failed case](http://g.recordit.co/ajaa2QRlnW.gif)
+
+Now there is new feature, add the configuration to test run of test plan
+![Attachemnt for failed case](http://g.recordit.co/uQLvQUq7cT.gif)