Merge pull request #1 from bhargav-garlapati/smart-ui

Smart UI

README.md

@@ -52,7 +52,7 @@ The tests are automatically triggered on every push request, with the results di
     - Handling JS Alerts, Confirm, and Prompt
     - Login Flow test
     - Upload file
-    - UI Visual Testing using Percy (smart UI, Applitools Eyes are coming soon...)
+    - UI Visual Testing using Percy & LambdaTest Smart UI (Applitools Eyes are coming soon...)
 Each test can be run individually or as part of the complete test suite.
 
 You can view the test execution results here:

cypress.config.js

@@ -23,6 +23,13 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      // on task event to log messages is required for the @lambdatest/cypress-driver plugin to work
+      on('task', {
+        log(message) {
+            console.log(message);
+            return null;
+        },
+      });
       config.env.ENV = process.env.ENV || 'production';
       console.log(`Cypress running in ${config.env.ENV} environment`);
       const environmentConfig = require(`./cypress/plugins/config/${config.env.ENV}.json`);
@@ -34,7 +41,4 @@ module.exports = defineConfig({
       };
     },
   },
-});
-
-
-
+});

cypress/e2e/lambdatest_ui_test_using_dynamic_content.cy.js

@@ -0,0 +1,45 @@
+// This script uses LambdaTest SmartUI Cypress SDK and LambdaTest Cypress CLI to run the tests using dynamic content on the-internet.herokuapp.com.
+// To setup at the LambdaTest dasboard 
+// Step 1: https://smartui.lambdatest.com/projects, 
+// Step 2: Create new project, Select CLI option
+// Step 3: Create new project name and continue
+// Step 4: Follow the instructions to install the LambdaTest CLI and run the tests
+
+
+describe('Welcome to the-internet', () => {
+    const data = require('../fixtures/content.json');
+
+    it('UI Test using Dynamic content 1', () => {
+
+        // Visit dynamic_content page
+        cy.visitPage('/dynamic_content?with_content=static');
+
+        // Check h3 text
+        cy.get('h3')
+        .contains(data.dynamicContent);
+
+        // Check content row 1 and take snapshot
+        cy.get('[id="content"] [class="row"]').eq(1).should('be.visible');
+        cy.smartuiSnapshot('Row-1', {
+            element: {
+                cssSelector: '[id="content"] > .row:nth-of-type(1)',
+            }
+        });
+
+        // Check content row 2 and take snapshot
+        cy.get('[id="content"] [class="row"]').eq(2).should('be.visible');
+        cy.smartuiSnapshot('Row-2', {
+            element: {
+                cssSelector: '[id="content"] > .row:nth-of-type(2)',
+            }
+        });
+
+        // Check content row 3 and take snapshot
+        cy.get('[id="content"] [class="row"]').eq(3).should('be.visible');
+        cy.smartuiSnapshot('Row-3', {
+            element: {
+                cssSelector: '[id="content"] > .row:nth-of-type(3)',
+            }
+        });
+    })
+})

cypress/support/e2e.js

@@ -18,7 +18,7 @@ import "./global-commands";
 import 'cypress-iframe';
 import '@percy/cypress';
 import 'cypress-axe';
-
+import '@lambdatest/cypress-driver';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

lambdatest-config.json

@@ -0,0 +1,26 @@
+{
+   "lambdatest_auth": {
+      "username": "bhargavk.garlapati",
+      "access_key": "mgoSYSnpLRh474YyjiTl1EQKwKXubFme1M6wHbTcSnVpMVILV1"
+   },
+   "browsers": [{
+        "browser": "Chrome",
+        "versions": ["130.0"],
+        "platform": "Windows 10"
+  }],
+   "run_settings": {
+      "reporter_config_file": "reporter-config.json",
+      "specs": "cypress/e2e/lambdatest_ui_test_using_dynamic_content.cy.js",
+      "ignore_files": "",
+      "feature_file_suppport": false,
+      "network": false,
+      "headless": false,
+      "npm_dependencies": {
+         "cypress": "^13.15.1"
+      },
+      "parallels": 1,
+      "smart_ui": {
+        "project": "smart_ui_cypress_example_e2e"
+      }
+   }
+}

package.json

@@ -7,12 +7,13 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-angular": "^17.4.4",
     "@cypress/grep": "^4.0.2",
-    "@lambdatest/smartui-cli": "^4.0.10",
+    "@lambdatest/cypress-driver": "^1.0.8",
+    "@lambdatest/smartui-cli": "^4.0.11",
     "@percy/cli": "^1.30.2",
     "@percy/cypress": "^3.1.3-beta.0",
     "ansi-regex": ">=5.0.1",
     "commitizen": "^4.3.0",
-    "cypress": "^13.15.1",
+    "cypress": "^13.16.0",
     "cypress-axe": "^1.5.0",
     "cypress-email-results": "^1.0.0",
     "cypress-iframe": "^1.0.1",
@@ -56,7 +57,7 @@
     "cypress:staging": "ENV=staging npm run cypress:open",
     "cypress:production": "ENV=production npm run cypress:open",
     "cypress:percy": "npx percy exec -- cypress run --spec cypress/e2e/ui_test_using_dynamic_content.cy.js",
-    "cypress:lambda": "lambdatest-cypress run --lcf lambdatest-config.json"
+    "cypress:lambda": "npx smartui --config smartui-web.json exec --fetch-results smart-ui-results.json -- npx cypress run --spec cypress/e2e/lambdatest_ui_test_using_dynamic_content.cy.js --headed"
   },
   "author": "Bhargav Garlapati",
   "license": "ISC"