Fingermark Cringer

Appearance

E2E Testing ​

E2E Tests for Supersonic UIs using Cypress

Quick Start ​

Prerequisite

Before you start, ensure you have the latest packages, symlinks and builds.

$ rush update && rush build

Ensure you have a e2e.config.json file defined with the relevant feature flags specified.

Headless ​

Local Testing

shell
$ npm run test -- --config-file=./PATH/TO/CONFIG.json

**Recorded Local Testing **

shell
$ npm run test:record -- --config-file=./PATH/TO/CONFIG.json

Note: This will record and send to cypress dashboard via the projectId.

Browser ​

Local Testing

shell
$ npm run open

Note: This will launch a GUI with a list of all testing specs to select and run.

Overview ​

e2e-testing is a suite of Cypress specs for primarily testing the @fingermarkglobal/fm.generic UI application. e2e-testing aims to address a few key goals of the @fingermarkglobal/fm.generic application (for more in-depth information please see the documentation for this project) plus a few of its own.

fm-generic:

  • Feature spec flagging
  • Workflow customisation (WIP)
  • 3rd Party UI creation

e2e-testing:

  • Non technical usability
  • Workflow reusability

Configuration ​

e2e-testing requires a e2e.config.json file that specifies a few things

  • Features flags
  • Customer
  • Serial key
  • Environment
  • Testing Environment

an example can be found below.

json
{
  "viewportHeight": 1980,
  "viewportWidth": 1024,
  "ignoreTestFiles": ["**/!(*.*.js)"],
  "projectId": "PROJECT_ID", // Cypress project id
  "env": {
    "ENV": "dev", // URL Environment
    "SERIAL": "generic-testing-kiosk", // UI Serial key
    "CUSTOMER": "fm-generic", // URL Customer
    "IMAGES": "off", // Testing environment image requests
    "FEATURES": {
      "PRODUCT_CAROUSEL": true,
      "ACCESSIBILITY": true,
      "DINE_IN": true,
      "TAKEAWAY": true,
      "TABLE_SERVICE": false,
      "ENERGY_KJ": true,
      "MINI_CART": true,
      "SLIDE_CART": true,
      "COUPONS": false
    }
  }
}

Pipelines ​

To add a UI to the E2E testing via our Bitbucket Pipelines, you will need to add a new Test Environment to the repository using Repository Settings > Pipelines > Deployment.

This environment should follow the naming convention of e2e-${CUSTOMER}.

You will need to add the following variables to this environment

  • FOLDER
    The folder that contains the UI to run

  • RECORD_KEY
    The Cypress dashboard record key. This can be accessed via Cypress Dashboard > ${Customer} Project > Project Settings > Record Keys

Usage ​

e2e-testing includes a few utility actions to reproduce specific workflows and actions (these can be found in the cypress/support/commands.js)

Note: Each section needs to be run from the associated page

Categories ​

  • cy.simpleProduct()

Adds a simple product to the cart

  • cy.groupedProduct()

Adds a grouped product to the cart

  • cy.customisableProduct()

Adds a customisable product to the cart

  • cy.comboProduct({ customise: true })

Adds a combo product to the cart

  • cy.cartPrice(110, 120)

Adds items to cart until within range

Customisation Modal ​

  • cy.customiseQuantity()

Customises the quantity of a customisation on a product

  • cy.customiseCheckbox()

Customises the selection of a customisation on a product

Customer Details ​

  • cy.enterDetails()

Enters the customer details

Receipt ​

  • cy.acceptReceipt()

Accepts the receipt

Cart ​

  • cy.inCart({ product: { name, price }})

Checks item is in cart

Home ​

  • cy.takeaway()

Starts a takeaway order

  • cy.dinein()

Starts a dine in order

General ​

  • cy.accessible()

Checks accessibility

  • cy.idle()

Checks idle timeout modal

  • cy.cancel()

Clicks footer secondary action

  • cy.complete()

Clicks footer primary action

Gotcha's ​

  • All live testing URLs use the following format https://${env}${customer}.web.app/?serialKey=${serial}