@/cypress

Installation

yarn add @commercetools-frontend/cypress

Usage

This package extends Cypress' cy command.

Define the task in the plugins file:

const customViews = require('@commercetools-frontend/cypress/task');

module.exports = (on, config) => {
  on('task', {
    ...customViews,
  });
};

import { defineConfig } from 'cypress';
import { customApplicationConfig } from '@commercetools-frontend/cypress/task';

export default defineConfig({
  retries: 1,
  video: false,
  e2e: {
    async setupNodeEvents(on, cypressConfig) {
      on('task', {
        customApplicationConfig,
      });
      return cypressConfig
    },
    baseUrl: 'http://localhost:3001',
  },
});

Extend the Cypress commands:

import '@commercetools-frontend/cypress/add-commands';

Commands

cy.loginToMerchantCenter

This command performs the user login to the Merchant Center. It automatically detects whether the Custom View is running on localhost or production and chooses the appropriate login mechanism.

• When it runs locally, the same mechanism used in the cy.loginByOidc is used.
• When it runs on production, a normal login flow is used where the user enters the credentials into the login form.

Usage

import { CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH } from '@commercetools-frontend/constants';

it('should render page 1', () => {
  cy.loginToMerchantCenter({
    entryPointUriPath: CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH,
    initialRoute: `/${Cypress.env('PROJECT_KEY')}/my-app/page-1`,
  });
})
it('should render page 2', () => {
  cy.loginToMerchantCenter({ entryPointUriPath: CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH });
  cy.visit(`/${Cypress.env('PROJECT_KEY')}/my-app/page-2`)
})

Options

Available options are:

• entryPointUriPath (required): User the constant for the entry point URI path: CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH.
• dotfiles (optional): A list of dotenv files to load when the custom-view-config.mjs is loaded (in case you're using an environment placeholder). By default the following dotenv files are loaded: .env and .env.local. You can also define the values using paths relative to the application folder.
• initialRoute (optional): The route to open after login. If not defined, make sure to call cy.visit yourself.
• projectKey (optional): The project key to access the user session. The session token is valid for one project key at a time. Defaults to Cypress.env('PROJECT_KEY').
• onBeforeLoad (optional): The function to call before the page has loaded all of its resources. Use this as a chance to interact, for example, with the browser storage.
• login (optional): An object with the user login credentials email and password. If not provided, the email defaults to Cypress.env('LOGIN_EMAIL') || Cypress.env('LOGIN_USER') and the password defaults to Cypress.env('LOGIN_PASSWORD').
• disableCacheAcrossSpecs (optional): Turn off caching the session across specs. This is only relevant for Cypress version >= 10.9.0.

The command also requires loading the custom-view-config.mjs (automatically done via the Cypress task), so it may need to load environment variables in case the Custom View config uses environment placeholders.
The .env and .env.local files are loaded by default from the Custom View folder. You can pass a dotfiles option to provide a list of names/paths relative to the Custom View folder in case the files in the project have a different name/location.

Session

The login command attempts to use the cy.session command, which caches and restores the user session between test runs.

This ultimately results in subsequent tests running much faster (by restoring the previous session) and making the test behave as if the user is authenticated.