itemengine-cypress-automation 1.0.2

package/cypress/support/helpers/selectText.js

@@ -0,0 +1,77 @@
+/**
+ * Referenced from: https://gist.github.com/erquhart/37bf2d938ab594058e0572ed17d3837a
+ * // Types "foo" and then selects "fo"
+ * cy.get('input')
+ *   .type('foo')
+ *   .selectText('fo')
+ *
+ * // Types "foo", "bar", "baz", and "qux" on separate lines, then selects "foo", "bar", and "baz"
+ * cy.get('textarea')
+ *   .type('foo{enter}bar{enter}baz{enter}qux{enter}')
+ *   .selectText('foo', 'baz')
+ *
+ * // `selectText` can alternatively target starting and ending nodes using query strings,
+ * // plus specific offsets. The queries are processed via `Element.querySelector`.
+ * cy.get('body')
+ *   .selectText({
+ *     anchorQuery: 'ul > li > p', // required
+ *     anchorOffset: 2 // default: 0
+ *     focusQuery: 'ul > li > p:last-child', // default: anchorQuery
+ *     focusOffset: 0 // default: 0
+ *    })
+ */
+
+// Low level command reused by `selectText` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+  cy.wrap(subject)
+    .trigger('mousedown')
+    .then(fn)
+    .trigger('mouseup');
+
+  cy.document().trigger('selectionchange');
+  return cy.wrap(subject);
+});
+
+Cypress.Commands.add('selectText', { prevSubject: true }, (subject, query, endQuery) => {
+  return cy.wrap(subject)
+    .selection($el => {
+      if (typeof query === 'string') {
+        const anchorNode = getTextNode($el[0], query);
+        const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+        const anchorOffset = anchorNode.wholeText.indexOf(query);
+        const focusOffset = endQuery ?
+          focusNode.wholeText.indexOf(endQuery) + endQuery.length :
+          anchorOffset + query.length;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      } else if (typeof query === 'object') {
+        const el = $el[0];
+        const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+        const anchorOffset = query.anchorOffset || 0;
+        const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
+        const focusOffset = query.focusOffset || 0;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      }
+    });
+});
+
+// Helper functions
+function getTextNode(el, match) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  const nodes = [];
+  let node;
+  while (node = walk.nextNode()) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}

package/cypress/support/helpers/utilities.js

@@ -0,0 +1,126 @@
+const utilities = {
+    /**
+     * @description verify the inner text of an element
+     * @param {*} selector cy.get selector
+     * @param {string} text inner text string
+     * @returns null
+     */
+    verifyInnerText: (selector, text) => {
+        selector.should(($element) => {
+            expect($element.get(0).innerText).to.deep.eq(text);
+        });
+        return null;
+    },
+
+    /**
+     * @description verify the text content of an element
+     * @param {*} selector cy.get selector
+     * @param {string} text text content string
+     * @returns null
+     */
+    verifyTextContent: (selector, text) => {
+        selector.should('have.text', text);
+        return null;
+    },
+
+    /**
+     * @description get the nth element with the same selector, needs to be stored in appropriate named variables and passed into the methods
+     * @param {*} selector cy.get selector 
+     * @param {number} index index of the nth element
+     * @returns cypress cy.get selector
+     */
+    getNthElement: (selector, index) => {
+        return selector.eq(index);
+    },
+
+    /**
+     * @param {*} selector cy.get selector
+     * @param {number} count count of the element
+     */
+    verifyElementCount: (selector, count) => {
+        selector.should('have.length', count);
+    },
+
+    /**
+     * @description verify multiple css properties of an element
+     * @param {*} selector cy.get selector
+     * @param {object} object key value pairs of the css property and it's value
+     * @example utilities.verifyCSS(fillInTheGapsTextPage.questionInputField(), { 
+                'color': css.color.text,
+                'font-size': css.fontSize.default, 
+                'font-weight': css.fontWeight.regular
+            })
+     */
+    verifyCSS: (selector, object) => {
+        Object.keys(object).forEach(key => {
+            selector.should('have.css', key, object[key])
+        });
+    },
+
+    /**
+     * @description verify multiple states of an element- 'visible'| 'hidden' | 'exist' | 'notExist'
+     * @param {*} selector cy.get selector
+     * @param {string} state state 'visible'| 'hidden' | 'exist' | 'notExist'
+     */
+    verifyElementVisibilityState: (selector, state) => {
+        switch (state) {
+            case 'visible':
+                selector.should('be.visible');
+                break;
+            case 'hidden':
+                selector.should('not.be.visible');
+                break;
+            case 'exist':
+                selector.should('exist');
+                break;
+            case 'notExist':
+                selector.should('not.exist');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * @description scroll element into view
+     * @param {*} selector cy.get selector
+     */
+    scrollIntoView: (selector) => {
+        selector.scrollIntoView()
+    },
+
+    /**
+     * @description hover over an element
+     * @param {*} selector cy.get selector
+     */
+    hoverOverElement: (selector) => {
+        selector.realHover();
+    },
+
+    hoverAwayFromElement: () => {
+        cy.get('body')
+            .realHover({ position: 'topRight' });
+    },
+
+    /**
+     * @description trigger a mouseover event on an element
+     * @param {*} selector cy.get selector
+     */
+    triggerMouseover: (selector) => {
+        selector.trigger('mouseover');
+    },
+
+    /**
+     * @description trigger a mouseout event on an element
+     * @param {*} selector cy.get selector
+     */
+    triggerMouseout: (selector) => {
+        selector.trigger('mouseout');
+    }
+}
+
+export default utilities
+
+//verifypseudoclass css, within
+// const
+// utilities.verifyCSS()

package/cypress.config.js

@@ -0,0 +1,76 @@
+const { defineConfig } = require('cypress')
+const fs = require('fs-extra');
+const path = require('path');
+const { isFileExist } = require('cy-verify-downloads');
+const { cloudPlugin } = require("cypress-cloud/plugin");
+
+async function getConfigurationByFile(file, theme) {
+  const pathToConfigFile = path.resolve(
+    '..',
+    'ilc-next-gen-item-engine-ui-test-cypress/cypress/config-files',
+    `${file}.json`
+  );
+  const pathToThemeFile = path.resolve(
+    '..',
+    'ilc-next-gen-item-engine-ui-test-cypress/cypress/fixtures/theme',
+    `${theme}.json`
+  );
+  const envVariables = await fs.readJson(pathToConfigFile);
+  envVariables.env.css = await fs.readJson(pathToThemeFile);
+  return envVariables;
+}
+
+module.exports = defineConfig({
+  reporter: 'cypress-mochawesome-reporter',
+  reporterOptions: {
+    reportDir: 'cypress/reports',
+    charts: true,
+    reportPageTitle: 'My Test Suite',
+    embeddedScreenshots: true,
+    inlineAssets: true,
+    html: true,
+    json: false,
+  },
+  screenshotOnRunFailure: true,
+  screenshotsFolder: 'cypress/assets',
+  requestTimeout: 20000,
+  responseTimeout: 120000,
+  defaultCommandTimeout: 30000,
+  pageLoadTimeout: 120000,
+  viewportWidth: 1400,
+  viewportHeight: 1025,
+  trashAssetsBeforeRuns: true,
+  chromeWebSecurity: true,
+  video: false,
+  watchForFileChanges: false,
+  scrollBehavior: 'center',
+  blockHosts: [
+    'www.google-analytics.com',
+    '*google-analytics.com',
+    'www.hotjar.com',
+    '*hotjar.com',
+  ],
+  e2e: {
+    setupNodeEvents(on, config) {
+      const file = config.env.fileConfig || 'ilstage';
+      const theme = config.env.theme || 'ilc';
+      on('task', {
+        resetShouldSkipFlag() {
+          shouldSkip = false;
+          return null;
+        },
+        shouldSkip(value) {
+          if (value != null) shouldSkip = value;
+          return shouldSkip;
+        },
+        isFileExist
+      });
+      require('cypress-mochawesome-reporter/plugin')(on);
+      require('@cypress/grep/src/plugin')()
+      return cloudPlugin(on, config), getConfigurationByFile(file, theme);
+    },
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    testIsolation: false,
+  },
+})

package/il.yaml

@@ -0,0 +1,14 @@
+# yaml-language-server: $schema=https://schema-validator.imaginelearning.tech/il.yaml/v2.0.json
+      
+meta:
+  owner: undeclared # Set this to the squad that maintains this repo
+  trackingId: 87b2338d-3ea4-45cc-bd63-73d1f4a73a6c
+  
+# otk:
+
+# catalog:
+
+spartanzBot:
+  fileChecker:
+    enabled: true
+    comment: true

package/language

@@ -0,0 +1 @@
+npm

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "itemengine-cypress-automation",
+  "version": "1.0.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "echo 'building'",
+    "test": "echo 'success'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ImagineLearning/itemengine-cypress-automation.git"
+  },
+  "dependencies": {
+    "@cypress/grep": "^3.1.5",
+    "axe-core": "^4.8.0",
+    "cy-verify-downloads": "^0.1.13",
+    "cypress": "^12.17.4",
+    "cypress-axe": "^1.5.0",
+    "cypress-cloud": "^1.9.6",
+    "cypress-file-upload": "^5.0.8",
+    "cypress-mochawesome-reporter": "^3.3.0",
+    "cypress-real-events": "^1.7.6",
+    "react-uuid": "^2.0.0"
+  }
+}