Cypress Plugin Real Upload

cypress-real-upload.js

function fileUploadClick(subject, clickElementSelector, fileInputSelector, _files = []) {
    return new Promise(async (resolve) => {

      await Cypress.automation("remote:debugger:protocol", {
        command: 'Page.enable',
        params: {
        }
      });

      await Cypress.automation("remote:debugger:protocol", {
        command: 'Runtime.enable',
        params: {
        }
      });

      await Cypress.automation("remote:debugger:protocol", {
        command: 'DOM.enable',
        params: {
        }
      });

      await Cypress.automation("remote:debugger:protocol", {
        command: 'Page.setInterceptFileChooserDialog',
        params: {
          enabled: true
        }
      });

      const fileInputResult = await Cypress.automation("remote:debugger:protocol", {
        command: "Runtime.evaluate",
        params: {
        expression: `document.querySelector(".aut-iframe").contentWindow.document.querySelector("${fileInputSelector}")`,
      }});

      const iframeResults = await Cypress.automation("remote:debugger:protocol", {
        command: "Runtime.evaluate",
        params: {
        expression: `
          (() => {
            const iframe = document.querySelector(".aut-iframe").contentWindow;
            function offset(el) {
              const rect = el.getBoundingClientRect();
              const scrollLeft = iframe.window.pageXOffset || iframe.document.documentElement.scrollLeft;
              const scrollTop = iframe.window.pageYOffset || iframe.document.documentElement.scrollTop;
              return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
            }
            const div = iframe.document.querySelector('${clickElementSelector}');
            const computedStyle = window.getComputedStyle(div);
            const computedWidth = Number(computedStyle.width.replace("px", ""));
            const computedHeight = Number(computedStyle.height.replace("px", ""));
            const divOffset = offset(div);
            divOffset.width = computedWidth;
            divOffset.height = computedHeight;
            divOffset.x = divOffset.top + (computedWidth / 2);
            divOffset.y = divOffset.left + (computedWidth / 2);
            return JSON.stringify(divOffset);
          })();
        `
      }});

      const { x, y } = JSON.parse(iframeResults.result.value);

      const log = Cypress.log({
        $el: subject,
        name: "clickRealUpload - Hover",
        consoleProps: () => ({
          "Applied To": subject.get(0),
          "Absolute Coordinates": { x, y },
        }),
      });

      log.snapshot("before");

      const { objectId } = fileInputResult.result;
      const { node } = await Cypress.automation("remote:debugger:protocol", {
        command: "DOM.describeNode",
        params: {
            objectId
        }
      });

      const { backendNodeId } = node;

      await Cypress.automation("remote:debugger:protocol", {
        command: "Input.dispatchMouseEvent",
        params: {
            x,
            y,
            type: "mouseMoved",
            button: "none",
            pointerType: "mouse"
          }
        });

      log.snapshot("after").end();

      const logClick = Cypress.log({
        $el: subject,
        name: "clickRealUpload - Click",
        consoleProps: () => ({
          "Applied To": subject.get(0),
          "Absolute Coordinates": { x, y },
        }),
      });

      logClick.snapshot("before");

      await Cypress.automation("remote:debugger:protocol", {
        command: "Input.dispatchMouseEvent",
        params: {
            type: "mousePressed",
            x,
            y,
            clickCount: 1,
            buttons: 1,
            pointerType: "mouse",
            button: "left",
          }
        });

      await Cypress.automation("remote:debugger:protocol", {
        command: "Input.dispatchMouseEvent",
        params: {
          type: "mouseReleased",
          x,
          y,
          clickCount: 1,
          buttons: 1,
          pointerType: "mouse",
          button: "left",
          }
        });

      logClick.snapshot("after").end();

      const uploadLog = Cypress.log({
        $el: subject,
        name: "clickRealUpload - Upload",
        consoleProps: () => ({
          "Applied To": subject.get(0),
          "Absolute Coordinates": { x, y },
        }),
      });

      uploadLog.snapshot("before");

      const filePath = "./Readme.txt";
      const files = [filePath];
      await Cypress.automation("remote:debugger:protocol", {
        command: "DOM.setFileInputFiles",
        params: {
          objectId,
          files,
          backendNodeId
        }
      });

      setTimeout(() => {
        uploadLog.snapshot("after").end();
        resolve(); 
      }, 2000);;
    });
  }

async function clickRealUpload($el, opts = {}) {
  await fileUploadClick($el, $el.selector, opts.inputField, opts.files);
  return $el;
}

module.exports = { clickRealUpload }