feat(lambdatest): smartUI support for Cypress test

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

@@ -1,7 +1,15 @@
+// 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', () => {
+    it('UI Test using Dynamic content 1', () => {
 
         // Visit dynamic_content page
         cy.visitPage('/dynamic_content?with_content=static');
@@ -11,15 +19,27 @@ describe('Welcome to the-internet', () => {
         .contains(data.dynamicContent);
 
         // Check content row 1 and take snapshot
-        cy.get('[id="content"] [class="row"]').eq(0).should('be.visible');
-        cy.screenshot('Static Content Row 1');
+        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(1).should('be.visible');
-        cy.screenshot('Static Content Row 2');
+        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(2).should('be.visible');
-        cy.screenshot('Dynamic Content Row 3');
+        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')

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"