Использование baseUrl в Cypress

Cypress создан для тестирования вашего приложения. Другими словами, он был разработан для тестирования приложения, к которому у вас есть доступ и которое вы активно разрабатываете. По этой причине Cypress поставляется с параметром baseUrl, который может помочь вам установить начальную точку тестирования. В этой статье мы рассмотрим, что это за параметр и как его можно использовать.

Содержание

• Настройка baseUrl в Cypress Configuration
• Доступ к baseUrl в тестах
• Изменение baseUrl во время выполнения теста
• Создание утверждений с помощью baseUrl
• Передача baseUrl через CLI
• Динамическая установка baseUrl
• Лучшие практики использования baseUrl

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Настройка baseUrl в Cypress Configuration

Первым шагом в использовании baseUrl в Cypress является его настройка в файле cypress.config.js. Этот файл находится в корне вашего проекта Cypress и содержит различные параметры конфигурации для ваших тестов. Конфигурация будет выглядеть примерно так:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
    },
    baseUrl: 'https://example.com'
  },
})

Необходимо заменить https://example.com на реальный URL вашего веб-приложения. Это может быть адрес localhost, если вы тестируете локально, стейджинг-сайт или релизный сайт. При такой конфигурации указанный URL становится доступным в качестве baseUrl во всем тестовом наборе.

Доступ к baseUrl в тестах

После того как вы задали baseUrl в своей конфигурации, вы можете обращаться к нему различными способами. Например, этот baseUrl будут использовать ваши команды cy.visit(), cy.request() и cy.intercept(), поэтому вместо ввода всего url используйте относительный путь.

cy.visit('/home') 
// resolves to https://example.com/home

cy.request('/api/items') 
// resolves to https://example.com/api/items

cy.intercept('/api/logout') 
// resolves to https://example.com/api/logout

💡 Знаете ли вы, что вместо URL-адреса можно открыть обычный html-файл? Просто используйте cy.visit('index.html') для открытия файла index.html в корневой папке вашего проекта.

Изменение baseUrl во время выполнения теста

В некоторых случаях может потребоваться изменить baseUrl на уровне теста. Это может быть характерно для smoke-тестов, предназначенных для охвата более крупной системы, состоящей из приложений, разделенных на несколько доменов. Чтобы задать другой baseUrl для теста, можно использовать объект конфигурации теста:

Copy to clipboard 
describe('smoke tests', () => {
  it('test default domain', () => {
    cy.visit('/home')
    // will go to https://example.com/home
  })

  it('test some other domain', { baseUrl: 'https://other.com '}, () => {
    cy.visit('/home')
    // will go to https://other.com/home
  })
})

Создание утверждений с помощью baseUrl

Вы можете захотеть сделать в тестах утверждения, в которых будет задействован baseUrl. Допустим, необходимо убедиться, что после выполнения определенного действия приложение перенаправляется на нужную страницу.

Вот пример того, как это сделать с помощью baseUrl:

describe('Redirect Test', () => {
  it('Redirects to the login page after signing out', () => {
    const baseUrl = Cypress.config('baseUrl');
    // Perform the sign-out action
    cy.get('#sign-out-button').click(); 
    // Assert that the user is redirected to the login page
    cy.url().should('eq', `${baseUrl}/login`);
  });
});

Передача baseUrl через CLI

На самом деле вовсе не обязательно настраивать свой baseUrl в файле cypress.config.js. Вместо этого можно решить эту проблему при запуске Cypress:

npx cypress open --config baseUrl=https://staging.example.com

Благодаря такому подходу вы можете легко переключаться между различными средами и запускать Cypress в той среде, в которой хотите провести тестирование.

Динамическая установка baseUrl

Можно пойти еще дальше и установить свой baseUrl динамически. Это можно сделать либо в самом параметре, либо с помощью функции setupNodeEvents().

Рассмотрим примеры.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
    },
    baseUrl: process.env.CI ? "https://staging.example.com" : "http://localhost:3000"
  },
})

В данном примере мы будем задавать адрес https://staging.example.com всякий раз, когда запускаем тесты в CI-конвейере. Большинство CI-сервисов устанавливают переменную CI=1, которую мы можем использовать для дальнейших условий. Мы добавляем условие, которое будет использовать адрес https://staging.example.com, если мы находимся в среде CI, и http://localhost:3000, если нет.

Если нам необходимо переключаться между несколькими URL, мы можем использовать функцию setupNodeEvents():

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {

      const version = config.env.VERSION || 'local'

      const urls = {
        local: "http://localhost:3000",
        staging: "https://staging.example.com",
        prod: "https://example.com"
      }

      // choosing version from urls object
      config.baseUrl = urls[version]

      return config
    },
  },
})

Теперь мы можем легко переключаться между различными URL, передавая имя версии приложения во флаг --env:

# will use http://localhost:3000
npx cypress open --env version="local"
# will use http://staging.example.com
npx cypress open --env version="staging"
# will use http://example.com
npx cypress open --env version="prod"
# will use fallback to http://localhost:3000
npx cypress open 

Лучшие практики использования baseUrl в Cypress

Частой ошибкой является использование baseUrl следующим образом:

cy.visit(Cypress.config('baseUrl') + '/home')

Как показано в примере, приведенном в начале этой заметки, это не добавляет ничего нового в ваши тесты, зато вносит избыточность.

Настройка baseUrl помогает писать тесты таким образом, чтобы их можно было запускать в любом окружении. Это очень важно для обеспечения гибкости тестов.

Перевод статьи «Cypress basics: Using baseUrl».