Getting Started - spryker-projects/cypress-boilerplate GitHub Wiki

This guide will help you get started with Cypress-Boilerplate by walking you through the process of cloning the repository, installing dependencies, and running tests against the Spryker Marketplace B2B demo shop. After confirming the functionality of the tests, you can then integrate Cypress-Boilerplate into your custom project.

❗ If you are new to Cypress:

• Start with Introduction to Cypress and go through the Core Concepts section.
• Understand Testing Types.
• Get familiar with Best Practices for working with Cypress.
• Explore learning resources at Cypress Learning Center.

Before you begin, ensure you have the following installed on your machine:

• Node.js (version 18 or higher)
• npm
• Git

First, fork the Cypress-Boilerplate repository to your GitHub account. Then clone the forked repository to your local machine.

git clone https://github.com/your-username/cypress-boilerplate.git cypress-boilerplate
cd cypress-boilerplate

Navigate to the project directory and install the required dependencies.

npm install

To run the Cypress-Boilerplate tests against the Spryker Marketplace B2B demoshop, you need to clone and install the demo shop repository.

• Spryker B2B Marketplace Demo Shop Repository
• Installation Instruction

Navigate back to the Cypress-Boilerplate directory and run the tests against the Spryker Marketplace B2B demo shop.

cd ../cypress-boilerplate
npx cypress open

In the Cypress Test Runner, select the test suite you want to run. This will execute the tests against the Spryker Marketplace B2B demo shop to ensure they are functional.

Now, try running the tests against your custom project. Make sure your project is set up and running locally or on a test environment.

Ensure that the URLs in your Cypress configuration match the URLs of your custom project. You can update these settings in the .env.local file or relevant configuration files.

Review and update the test data in the fixtures directory to match your custom project. The fixtures directory contains JSON files with test data that the tests rely on.

• Locate the relevant fixture files in the cypress/fixtures directory.
• Update the test data to match the data in your custom project.

// Example: Updating test data in a fixture file

{
  "username": "custom_username",
  "password": "custom_password"
}

npx cypress run

If the tests fail, follow these steps to troubleshoot:

Review the test logs in the Cypress Test Runner or the terminal output for any error messages. This can help identify the cause of the failure.

Ensure that the tests are running against the correct URLs. Check the URLs in your Cypress configuration and compare them with the URLs of your custom project.

Review and update the test data in the fixtures directory to match your custom project. The fixtures directory contains JSON files with test data that the tests rely on.

• Locate the relevant fixture files in the cypress/fixtures directory.
• Update the test data to match the data in your custom project.

If the UI elements or locators or API endpoints in your custom project differ from those in the Spryker Marketplace B2B demo shop, update the page object models, and/or API endpoints in Cypress-Boilerplate to match your project.

• Locate the relevant
  • page object files in the cypress/support/page-objects directory.
  • API endpoint files in the cypress/support/glue-endpoints directory.
• Update the locators to match the elements in your custom project.
• Update the API endpoints to match your custom project.

// Example: Updating a locator in a page object file

const loginForm = 'form[name="loginForm"]'

export class LoginPage extends AbstractPage {
  getEmailField = (): Cypress.Chainable => {
    return cy.get(loginForm).find('#loginForm_email')
  }
}

// Example: Updating API endpoint

export class AccessTokens extends GlueRequest {
  protected ENDPOINT_NAME = '/access-tokens'

  getCustomerAccessToken = (
    email: string,
    password: string
  ): Cypress.Chainable => {
    return cy.api({
      method: 'POST',
      url: this.GLUE_ENDPOINT,
      headers: {
        'Accept-Language': 'de-DE, de;q=0.9',
      },
      body: {
        data: {
          type: 'access-tokens',
          attributes: {
            username: email,
            password: password,
          },
        },
      },
      failOnStatusCode: false,
    })
  }
}

After making the necessary adjustments, re-run the tests to verify that they pass successfully.

npx cypress run

Once the tests are passing against your custom project, you can further customize the Cypress-Boilerplate tests to suit your specific testing requirements. This might include adding new tests, modifying existing tests, or integrating additional testing tools and frameworks.

Happy testing!