test(ll): make cypress tests compatible with deployed environments

labware-library/Makefile

@@ -37,13 +37,25 @@ dev:
 serve: all
 	node ../scripts/serve-static dist
 
+.PHONY: clean-downloads
+clean-downloads:
+	shx rm -rf cypress/downloads
+
 # end to end tests
 .PHONY: test-e2e
-test-e2e:
+test-e2e: clean-downloads
 	concurrently --no-color --kill-others --success first --names "labware-library-server,labware-library-tests" \
-	"$(MAKE) dev CYPRESS=1 GTM_ID=''" \
+	"$(MAKE) dev GTM_ID=''" \
 	"wait-on http://localhost:5179/ && echo \"Running cypress at $(date)\" && cypress run --browser chrome --headless --record false"
 
+REMOTE_BASE_URL ?= https://labware.opentrons.com
+.PHONY: test-e2e-remote
+test-e2e-remote: clean-downloads
+	@echo "Running cypress tests against $(CYPRESS_BASE_URL)"
+	@echo "example: make test-e2e-remote REMOTE_BASE_URL='https://labware.opentrons.com'"
+	@echo
+	cypress run --browser chrome --headless --config "baseUrl=$(REMOTE_BASE_URL)"
+
 # unit tests
 .PHONY: test
 test:

labware-library/README.md

@@ -83,3 +83,7 @@ Certain environment variables, when set, will affect the artifact output.
 | OT_LL_MIXPANEL_DEV_ID | some string ID                       | Mixpanel token for dev environment.                       |
 | OT_LL_VERSION         | semver string eg "1.2.3"             | reported to analytics. Read from package.json by default. |
 | OT_LL_BUILD_DATE      | result of `new Date().toUTCString()` | reported to analytics. Uses current date-time by default. |
+
+## Cypress
+
+`npx cypress open` will open the Cypress test runner. From there, you can run the tests in the `labware-library` directory.

labware-library/cypress.config.js

@@ -3,11 +3,6 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   video: false,
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
-    },
     baseUrl: 'http://localhost:5179',
   },
 })

labware-library/cypress/e2e/home.cy.js

@@ -1,7 +1,8 @@
+import { navigateToUrl } from '../support/e2e'
+
 describe('The Desktop Home Page', () => {
   beforeEach(() => {
-    cy.visit('/')
-    cy.viewport('macbook-15')
+    navigateToUrl('/')
   })
 
   it('successfully loads', () => {

labware-library/cypress/e2e/labware-creator/create.cy.js

@@ -2,10 +2,11 @@
 // an element is in view before clicking or checking with
 // { force: true }
 
+import { navigateToUrl } from '../../support/e2e'
+
 context('The Labware Creator Landing Page', () => {
   beforeEach(() => {
-    cy.visit('/#/create')
-    cy.viewport('macbook-15')
+    navigateToUrl('/#/create')
   })
 
   describe('The initial text', () => {

labware-library/cypress/e2e/labware-creator/customTubeRack.cy.js

@@ -1,13 +1,13 @@
-import 'cypress-file-upload'
-import { expectDeepEqual } from '@opentrons/shared-data/js/cypressUtils'
-
-const expectedExportFixture =
-  '../fixtures/somerackbrand_24_tuberack_1500ul.json'
+import {
+  navigateToUrl,
+  fileHelper,
+  wellBottomImageLocator,
+} from '../../support/e2e'
+const fileHolder = fileHelper('somerackbrand_24_tuberack_1500ul')
 
 context('Tubes and Rack', () => {
   before(() => {
-    cy.visit('/#/create')
-    cy.viewport('macbook-15')
+    navigateToUrl('/#/create')
   })
 
   describe('Custom 6 x 4 tube rack', () => {
@@ -109,24 +109,29 @@ context('Tubes and Rack', () => {
       cy.contains('Diameter is a required field').should('not.exist')
 
       // well bottom shape and depth
+      // check flat
       cy.get("input[name='wellBottomShape'][value='flat']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('exist')
-      cy.get("img[src*='_round.']").should('not.exist')
-      cy.get("img[src*='_v.']").should('not.exist')
+      cy.get(wellBottomImageLocator.flat).should('exist')
+      cy.get(wellBottomImageLocator.round).should('not.exist')
+      cy.get(wellBottomImageLocator.v).should('not.exist')
+
+      // check u shaped
       cy.get("input[name='wellBottomShape'][value='u']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('not.exist')
-      cy.get("img[src*='_round.']").should('exist')
-      cy.get("img[src*='_v.']").should('not.exist')
+      cy.get(wellBottomImageLocator.flat).should('not.exist')
+      cy.get(wellBottomImageLocator.round).should('exist')
+      cy.get(wellBottomImageLocator.v).should('not.exist')
+
+      // check v shaped
       cy.get("input[name='wellBottomShape'][value='v']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('not.exist')
-      cy.get("img[src*='_round.']").should('not.exist')
-      cy.get("img[src*='_v.']").should('exist')
+      cy.get(wellBottomImageLocator.flat).should('not.exist')
+      cy.get(wellBottomImageLocator.round).should('not.exist')
+      cy.get(wellBottomImageLocator.v).should('exist')
       cy.get("input[name='wellDepth']").focus().blur()
       cy.contains('Depth is a required field').should('exist')
       cy.get("input[name='wellDepth']").type('100').blur()
@@ -159,28 +164,20 @@ context('Tubes and Rack', () => {
       cy.get(
         "input[placeholder='somerackbrand 24 Tube Rack with sometubebrand 1.5 mL']"
       ).should('exist')
-      cy.get("input[placeholder='somerackbrand_24_tuberack_1500ul']").should(
+      cy.get(`input[placeholder='${fileHolder.downloadFileStem}']`).should(
         'exist'
       )
-
-      // now try again with all fields inputed
-      cy.fixture(expectedExportFixture).then(expectedExportLabwareDef => {
-        cy.get('button').contains('EXPORT FILE').click()
-
-        cy.window()
-          .its('__lastSavedFileBlob__')
-          .should('be.a', 'blob')
-          .should(async blob => {
-            const labwareDefText = await blob.text()
-            const savedDef = JSON.parse(labwareDefText)
-
-            expectDeepEqual(assert, savedDef, expectedExportLabwareDef)
+      cy.get('button').contains('EXPORT FILE').click()
+
+      cy.fixture(fileHolder.expectedExportFixture).then(
+        expectedExportLabwareDef => {
+          cy.readFile(fileHolder.downloadPath).then(actualExportLabwareDef => {
+            expect(actualExportLabwareDef).to.deep.equal(
+              expectedExportLabwareDef
+            )
           })
-
-        cy.window()
-          .its('__lastSavedFileName__')
-          .should('equal', `somerackbrand_24_tuberack_1500ul.json`)
-      })
+        }
+      )
     })
   })
 })

labware-library/cypress/e2e/labware-creator/fileImport.cy.js

@@ -1,11 +1,15 @@
-import { expectDeepEqual } from '@opentrons/shared-data/js/cypressUtils'
+import {
+  navigateToUrl,
+  fileHelper,
+  wellBottomImageLocator,
+} from '../../support/e2e'
+const fileHolder = fileHelper('testpro_15_wellplate_5ul')
 
 const importedLabwareFile = 'TestLabwareDefinition.json'
 
 describe('File Import', () => {
   before(() => {
-    cy.visit('/#/create')
-    cy.viewport('macbook-15')
+    navigateToUrl('/#/create')
   })
 
   it('tests the file import flow', () => {
@@ -49,9 +53,9 @@ describe('File Import', () => {
 
     // verify well bottom and depth
     cy.get("input[name='wellBottomShape'][value='flat']").should('exist')
-    cy.get("img[src*='_flat.']").should('exist')
-    cy.get("img[src*='_round.']").should('not.exist')
-    cy.get("img[src*='_v.']").should('not.exist')
+    cy.get(wellBottomImageLocator.flat).should('exist')
+    cy.get(wellBottomImageLocator.round).should('not.exist')
+    cy.get(wellBottomImageLocator.v).should('not.exist')
     cy.get("input[name='wellDepth'][value='5']").should('exist')
 
     // verify grid spacing
@@ -69,28 +73,22 @@ describe('File Import', () => {
 
     // File info
     cy.get("input[placeholder='TestPro 15 Well Plate 5 µL']").should('exist')
-    cy.get("input[placeholder='testpro_15_wellplate_5ul']").should('exist')
+    cy.get(`input[placeholder='${fileHolder.downloadFileStem}']`).should(
+      'exist'
+    )
 
     // All fields present
     cy.get('button[class*="_export_button_"]').click({ force: true })
     cy.contains(
       'Please resolve all invalid fields in order to export the labware definition'
     ).should('not.exist')
 
-    cy.fixture(importedLabwareFile).then(expected => {
-      cy.window()
-        .its('__lastSavedFileBlob__')
-        .should('be.a', 'blob') // wait until we get the blob
-        .should(async blob => {
-          const labwareDefText = await blob.text()
-          const savedDef = JSON.parse(labwareDefText)
-
-          expectDeepEqual(assert, savedDef, expected)
+    cy.fixture(fileHolder.expectedExportFixture).then(
+      expectedExportLabwareDef => {
+        cy.readFile(fileHolder.downloadPath).then(actualExportLabwareDef => {
+          expect(actualExportLabwareDef).to.deep.equal(expectedExportLabwareDef)
         })
-    })
-
-    cy.window()
-      .its('__lastSavedFileName__')
-      .should('equal', 'testpro_15_wellplate_5ul.json')
+      }
+    )
   })
 })

labware-library/cypress/e2e/labware-creator/reservoir.cy.js

@@ -1,11 +1,13 @@
-// Scrolling seems wonky, so I disabled checking to see if
-// an element is in view before clicking or checking with
-// { force: true }
+import {
+  navigateToUrl,
+  fileHelper,
+  wellBottomImageLocator,
+} from '../../support/e2e'
+const fileHolder = fileHelper('testpro_10_reservoir_250ul')
 
 context('Reservoirs', () => {
   before(() => {
-    cy.visit('/#/create')
-    cy.viewport('macbook-15')
+    navigateToUrl('/#/create')
   })
 
   describe('Reservoir', () => {
@@ -143,21 +145,21 @@ context('Reservoirs', () => {
       cy.get("input[name='wellBottomShape'][value='flat']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('exist')
-      cy.get("img[src*='_round.']").should('not.exist')
-      cy.get("img[src*='_v.']").should('not.exist')
+      cy.get(wellBottomImageLocator.flat).should('exist')
+      cy.get(wellBottomImageLocator.round).should('not.exist')
+      cy.get(wellBottomImageLocator.v).should('not.exist')
       cy.get("input[name='wellBottomShape'][value='u']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('not.exist')
-      cy.get("img[src*='_round.']").should('exist')
-      cy.get("img[src*='_v.']").should('not.exist')
+      cy.get(wellBottomImageLocator.flat).should('not.exist')
+      cy.get(wellBottomImageLocator.round).should('exist')
+      cy.get(wellBottomImageLocator.v).should('not.exist')
       cy.get("input[name='wellBottomShape'][value='v']").check({
         force: true,
       })
-      cy.get("img[src*='_flat.']").should('not.exist')
-      cy.get("img[src*='_round.']").should('not.exist')
-      cy.get("img[src*='_v.']").should('exist')
+      cy.get(wellBottomImageLocator.flat).should('not.exist')
+      cy.get(wellBottomImageLocator.round).should('not.exist')
+      cy.get(wellBottomImageLocator.v).should('exist')
       cy.get("input[name='wellDepth']").focus().blur()
       cy.contains('Depth is a required field').should('exist')
       cy.get("input[name='wellDepth']").type('70').blur()
@@ -198,13 +200,24 @@ context('Reservoirs', () => {
 
       // File info
       cy.get("input[placeholder='TestPro 10 Reservoir 250 µL']").should('exist')
-      cy.get("input[placeholder='testpro_10_reservoir_250ul']").should('exist')
+      cy.get(`input[placeholder='${fileHolder.downloadFileStem}']`).should(
+        'exist'
+      )
 
       // All fields present
       cy.get('button[class*="_export_button_"]').click({ force: true })
       cy.contains(
         'Please resolve all invalid fields in order to export the labware definition'
       ).should('not.exist')
+      cy.fixture(fileHolder.expectedExportFixture).then(
+        expectedExportLabwareDef => {
+          cy.readFile(fileHolder.downloadPath).then(actualExportLabwareDef => {
+            expect(actualExportLabwareDef).to.deep.equal(
+              expectedExportLabwareDef
+            )
+          })
+        }
+      )
     })
   })
 })

labware-library/cypress/e2e/labware-creator/tipRack.cy.js

@@ -1,12 +1,9 @@
-import 'cypress-file-upload'
-import { expectDeepEqual } from '@opentrons/shared-data/js/cypressUtils'
-
-const expectedExportFixture = '../fixtures/generic_1_tiprack_20ul.json'
+import { navigateToUrl, fileHelper } from '../../support/e2e'
+const fileHolder = fileHelper('generic_1_tiprack_20ul')
 
 describe('Create a Tip Rack', () => {
   before(() => {
-    cy.visit('/#/create')
-    cy.viewport('macbook-15')
+    navigateToUrl('/#/create')
   })
   it('Should create a tip rack', () => {
     // Tip Rack Selection from drop down
@@ -242,26 +239,19 @@ describe('Create a Tip Rack', () => {
     cy.get('input[name="displayName"]')
       .clear()
       .type('Brand Chalu 1 Tip Rack 20ul')
-    cy.get('input[name="loadName"]').clear().type('generic_1_tiprack_20ul')
+    cy.get('input[name="loadName"]').clear().type(fileHolder.downloadFileStem)
 
     // Verify the exported file to the fixture
     cy.get('button').contains('EXPORT FILE').click()
 
-    cy.fixture(expectedExportFixture).then(expectedExportLabwareDef => {
-      cy.window()
-        .its('__lastSavedFileBlob__')
-        .should('be.a', 'blob')
-        .should(async blob => {
-          const labwareDefText = await blob.text()
-          const savedDef = JSON.parse(labwareDefText)
-
-          expectDeepEqual(assert, savedDef, expectedExportLabwareDef)
+    cy.fixture(fileHolder.expectedExportFixture).then(
+      expectedExportLabwareDef => {
+        cy.readFile(fileHolder.downloadPath).then(actualExportLabwareDef => {
+          expect(actualExportLabwareDef).to.deep.equal(expectedExportLabwareDef)
         })
-    })
+      }
+    )
 
-    cy.window()
-      .its('__lastSavedFileName__')
-      .should('equal', `generic_1_tiprack_20ul.json`)
     // 'verify the too big, too small error
     cy.get('input[name="gridOffsetY"]').clear().type('24')
     cy.get('#CheckYourWork span')