Updating WDIO demo

Author: valandi

README.md

@@ -1,49 +1,36 @@
 # Applitools Example: WebdriverIO in JavaScript
 
-This is the example project for the [WebdriverIO JavaScript tutorial](https://applitools.com/tutorials/quickstart/web/webdriverio).
-It shows how to start automating visual tests with the [Applitools Eyes](https://applitools.com/platform/eyes/)
-and [WebdriverIO](https://webdriver.io/) in JavaScript.
+Get started with Applitools Eyes visual testing with this example of using [WDIO](https://webdriver.io/) and our [WDIO SDK](https://applitools.com/tutorials/web/webdriverio).
 
-It uses:
+Learn more about how to install and start this project with our [WDIO tutorial](https://applitools.com/tutorials/quickstart/web/webdriverio)!
 
-* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) as the programming language
-* [WebdriverIO](https://webdriver.io/) for browser automation
-* [Google Chrome](https://www.google.com/chrome/downloads/) as the local browser for testing
-* [npm](https://www.npmjs.com/) for dependency management
-* [Applitools Eyes](https://applitools.com/platform/eyes/) for visual testing
+# Installation & Run
+1. Install the dependencies
+    ```sh
+    npm install
+    npm install chromedriver --detect_chromedriver_version
+    ```
 
-It can also run tests with:
+To authenticate via the Applitools server and run tests, you need to set your API key provided from Applitools Eyes. For details on how to retrieve your API key, see [the Applitools documentation](https://applitools.com/tutorials/getting-started/retrieve-api-key).
 
-* [Applitools Ultrafast Grid](https://applitools.com/platform/ultrafast-grid/) for cross-browser execution
-* [Applitools Execution Cloud](https://applitools.com/platform/execution-cloud/) for self-healing remote WebDriver sessions
+2. Choose one of the following options to set your API Key.
+    * Set your Applitools API Key as an environment variable. 
+        * macOS/Linux: `export APPLITOOLS_API_KEY=<Your API Key>`
+        * Windows: `set APPLITOOLS_API_KEY=<Your API Key>`
+        
+    * Set your Applitools API Key inside the **applitools.config.js** file via the `apiKey` setting.
+        * Note: If you are not using the Eyes public cloud, you will need to update the `serverUrl` to your Eyes server URL in the **applitools.config.js** configuration file or set via an `APPLITOOLS_SERVER_URL` environment variable. See our [documentation](https://applitools.com/tutorials/sdks/webdriverio/advanced) for more information on these settings.
 
-To run this example project, you'll need:
+3. Run the example test
+    ```sh
+    npm tset
+    ```
 
-1. A free [Applitools account](https://auth.applitools.com/users/register).
-2. The [Node.js](https://nodejs.org/en/) version 12 or higher.
-3. A good JavaScript editor, such as [Visual Studio Code](https://code.visualstudio.com/).
-4. [npm](https://www.npmjs.com/) (typically bundled with Node.js).
-5. An up-to-date version of [Google Chrome](https://www.google.com/chrome/downloads/).
-6. A corresponding version of [ChromeDriver](https://chromedriver.chromium.org/downloads).
+4. After the example tests complete. Visit your Applitools Eyes dashboard to view the results.
 
-To install project dependencies, run:
+## More Information
 
-```
-npm install
-npm install chromedriver --detect_chromedriver_version
-```
+Learn more about [Applitools Eyes](https://www.applitools.com) and the [Applitool Ultrafast Grid](https://applitools.com/platform/ultrafast-grid).
 
-The main test case is [`acme-bank.test.js`](test/acme-bank.test.js).
-By default, the project will run tests with Ultrafast Grid but not Execution Cloud.
-You can change these settings in the test file.
-
-To execute tests, set the `APPLITOOLS_API_KEY` environment variable
-to your [account's API key](https://applitools.com/tutorials/getting-started/setting-up-your-environment.html),
-and then run:
-
-```
-npm test
-```
-
-**For full instructions on running this project, take our
-[WebdriverIO JavaScript tutorial](https://applitools.com/tutorials/quickstart/web/webdriverio)!**
+More about the Eyes Storybook SDK:
+* https://www.npmjs.com/package/@applitools/eyes-storybook

package.json

@@ -10,7 +10,7 @@
   "author": "Applitools Team <[email protected]> (http://www.applitools.com/)",
   "license": "ISC",
   "dependencies": {
-    "@applitools/eyes-webdriverio": "^5.44.0",
+    "@applitools/eyes-webdriverio": "^5.58.2",
     "@wdio/cli": "^8.10.2",
     "@wdio/dot-reporter": "^8.10.2",
     "@wdio/local-runner": "^8.10.2",

test/acme-bank.test.js

@@ -2,13 +2,13 @@
 
 const { remote } = require('webdriverio');
 
-const { Eyes, 
+const { Eyes,
   ClassicRunner,
-  VisualGridRunner, 
+  VisualGridRunner,
   RunnerOptions,
-  Target, 
-  RectangleSize, 
-  Configuration, 
+  Target,
+  RectangleSize,
+  Configuration,
   BatchInfo,
   BrowserType,
   ScreenOrientation,
@@ -24,7 +24,7 @@ describe('ACME Bank', function () {
   // They are hard-coded here to keep the example project simple.
   const USE_ULTRAFAST_GRID = true;
   const USE_EXECUTION_CLOUD = false;
-  
+
   // Test control inputs to read once and share for all tests
   var applitoolsApiKey;
 
@@ -66,7 +66,7 @@ describe('ACME Bank', function () {
 
     // Create a configuration for Applitools Eyes.
     config = new Configuration();
-    
+
     // Set the Applitools API key so test results are uploaded to your account.
     // If you don't explicitly set the API key with this call,
     // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it.
@@ -89,13 +89,13 @@ describe('ACME Bank', function () {
       config.addDeviceEmulation(DeviceName.Nexus_10, ScreenOrientation.LANDSCAPE);
     }
   });
-  
-  
+
+
   beforeEach(async function () {
     // This method sets up each test with its own ChromeDriver and Applitools Eyes objects.
     // Even though this test will run visual checkpoints on different browsers in the Ultrafast Grid,
     // it still needs to run the test one time locally to capture snapshots.
-    
+
     // Create the Applitools Eyes object connected to the runner and set its configuration.
     eyes = new Eyes(runner);
     eyes.setConfiguration(config);
@@ -118,27 +118,27 @@ describe('ACME Bank', function () {
     // Open Eyes to start visual testing.
     // It is a recommended practice to set all four inputs:
     browser = await eyes.open(
-      
+
       // WebDriver object to "watch".
       browser,
-      
+
       // The name of the application under test.
       // All tests for the same app should share the same app name.
       // Set this name wisely: Applitools features rely on a shared app name across tests.
       'ACME Bank',
-      
+
       // The name of the test case for the given application.
       // Additional unique characteristics of the test may also be specified as part of the test name,
       // such as localization information ("Home Page - EN") or different user permissions ("Login by admin").
       this.currentTest.fullTitle(),
-    
+
       // The viewport size for the local browser.
       // Eyes will resize the web browser to match the requested viewport size.
       // This parameter is optional but encouraged in order to produce consistent results.
       new RectangleSize(1200, 600)
     );
   });
-  
+
   it('should log into a bank account', async () => {
     // This test covers login for the Applitools demo site, which is a dummy banking app.
     // The interactions use typical Selenium calls,
@@ -147,21 +147,21 @@ describe('ACME Bank', function () {
     // Traditional assertions that scrape the page for text values are not needed here.
 
     // Load the login page.
-    await browser.url('https://demo.applitools.com');
+    await browser.url('https://sandbox.applitools.com/bank');
 
     // Verify the full login page loaded correctly.
     await eyes.check(Target.window().fully().withName("Login page"));
-    
+
     // Perform login.
-    await browser.$("#username").setValue("andy");
-    await browser.$("#password").setValue("i<3pandas");
+    await browser.$("#username").setValue("Chris");
+    await browser.$("#password").setValue("CorrectHorseBatteryStaple");
     await browser.$("#log-in").click();
 
     // Verify the full main page loaded correctly.
     // This snapshot uses LAYOUT match level to avoid differences in closing time text.
     await eyes.check(Target.window().fully().withName("Main page").layout());
   });
-  
+
   afterEach(async () => {
 
     // Close Eyes to tell the server it should display the results.
@@ -177,12 +177,12 @@ describe('ACME Bank', function () {
     // If you want the ACME demo app test to wait synchronously for all checkpoints to complete, then use `eyes.close()`.
     // If any checkpoints are unresolved or failed, then `eyes.close()` will make the ACME demo app test fail.
   });
-  
+
   after(async () => {
     // Close the batch and report visual differences to the console.
     // Note that it forces Mocha to wait synchronously for all visual checkpoints to complete.
     const allTestResults = await runner.getAllTestResults();
     console.log(allTestResults);
   });
-  
+
 });