@/cypress

Installation

yarn add @commercetools-frontend/cypress

Usage

This package extends Cypress' cy command.

Cypress version < 10.0.0

Define the task in the plugins file:

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

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

Cypress version >= 10.0.0

Define the task in the cypress.config.ts file. See the migration guide.

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.loginToMerchantCenterForCustomView

This command performs the user login to the Merchant Center to test a Custom View. Testing Custom Views is expected to occur on localhost.

Usage

it('should render page 1', () => {
  cy.loginToMerchantCenterForCustomView();
})

Options

Available options are:

• packageName (optional): The package name as specified in the Custom View's package.json. If not provided, it defaults to Cypress.env('PACKAGE_NAME').
• dotfiles (optional): A list of dotenv files to load when the custom-view-config.mjs is loaded (in case you're using variable placeholders). By default the following dotenv files are loaded: .env and .env.local. You can also define the values using paths relative to the Custom View folder.
• 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.