Simplify (#3)

Revamped Tutorial to match new quickstart: https://applitools.com/tutorials/quickstart/web/cypress/cypress_quickstart

Author: MJApplitools

applitools.config.js

@@ -1,35 +1,18 @@
-// This config file specifies how to run visual tests with Applitools.
-// It applies to all tests in this project.
-
 module.exports = {
-
-    // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel.
+    // Specify the number of visual checkpoints Applitools will perform in parallel.
     // Warning: If you have a free account, then concurrency will be limited to 1.
     testConcurrency: 5,
 
-    // To connect visual test results to your account,
-    // you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key.
-    // To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html
-    // If you don't explicitly set the API key here,
-    // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it.
-    apiKey: 'APPLITOOLS_API_KEY',
-    
-    // A batch is the collection of visual checkpoints for a test suite.
-    // Batches are displayed in the Eyes Test Manager, so use meaningful names.
-    batchName: 'Example: Cypress in JavaScript with the Ultrafast Grid',
+    // Uncomment the below line and paste in your API key as an alternative to using an environment variable
+    // apiKey: '',
 
-    // Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid.
-    // This setting defines 5 unique browser configurations to test.
-    browser: [
+    batchName: 'Cypress Quickstart',
 
-        // Add 3 desktop browsers with different viewports for cross-browser testing in the Ultrafast Grid.
-        // Other browsers are also available, like Edge and IE.
+    // Select the browsers and devices to run your tests on via the Ultrafast Grid
+    browser: [
         {width: 800, height: 600, name: 'chrome'},
         {width: 1600, height: 1200, name: 'firefox'},
         {width: 1024, height: 768, name: 'safari'},
-
-        // Add 2 mobile emulation devices with different orientations for cross-browser testing in the Ultrafast Grid.
-        // Other mobile devices are available, including iOS.
         {deviceName: 'Pixel 2', screenOrientation: 'portrait'},
         {deviceName: 'Nexus 10', screenOrientation: 'landscape'},
     ]

cypress/e2e/acme-bank.cy.js

@@ -0,0 +1,33 @@
+describe('ACME Bank', () => {
+    beforeEach(() => {
+        // Start Applitools Visual AI Test
+        cy.eyesOpen({
+            appName: 'ACME Bank',
+            testName: Cypress.currentTest.title,
+        })
+    })
+    it('should log into a bank account', () => {
+        cy.visit('https://sandbox.applitools.com/bank?layoutAlgo=true');
+
+        // Full Page - Visual AI Assertion
+        cy.eyesCheckWindow({
+            tag: "Login page"
+        });
+
+        cy.get('#username').type('user')
+        cy.get('#password').type('password')
+        cy.get('#log-in').click()
+
+        cy.eyesCheckWindow({
+            tag: "Main page",
+            layout: [
+                {selector: '.dashboardOverview_accountBalances__3TUPB'},
+                {selector: '.dashboardTable_dbTable___R5Du'}
+            ]
+        });
+    })
+    afterEach(() => {
+        // End Applitools Visual AI Test
+        cy.eyesClose()
+    })
+})

cypress/e2e/layout-regions-example.cy.js

@@ -0,0 +1,34 @@
+describe('ACME Bank', () => {
+    beforeEach(() => {
+        // Start Applitools Visual AI Test
+        cy.eyesOpen({
+            appName: 'ACME Bank',
+            testName: Cypress.currentTest.title,
+        })
+    })
+    it('should log into a bank account', () => {
+        cy.visit('https://sandbox.applitools.com/bank?layoutAlgo=true');
+
+        // Full Page - Visual AI Assertion
+        cy.eyesCheckWindow({
+            tag: "Login page"
+        });
+
+        cy.get('#username').type('user')
+        cy.get('#password').type('password')
+        cy.get('#log-in').click()
+
+        cy.eyesCheckWindow({
+            tag: "Main page",
+            // Uncomment to apply Layout regions and have test pass
+            // layout: [
+            //     {selector: '.dashboardOverview_accountBalances__3TUPB'},
+            //     {selector: '.dashboardTable_dbTable___R5Du'}
+            // ]
+        });
+    })
+    afterEach(() => {
+        // End Applitools Visual AI Test
+        cy.eyesClose()
+    })
+})