Cypress Testing. 5 советов, которые вы можете найти полезными.

Переменные среды

Сегодня в основном при создании веб -приложения мы все стараемся использовать как минимум две среды. Это помогает нам гарантировать, что все новые изменения, развернутые из предыдущих сред, работают так, как они будут выдвинуты на производство. И у вас, вероятно, есть разные базы данных, конечные точки API и переменные для каждой среды. Так,

Когда дело доходит до Cypress, вы также можете иметь отдельный файл конфигурации для каждой среды.

Структура файла и имена файлов необязательны:

/src/cypress/config
                  /test.json
                  /staging.json
                  /production.json

Давайте посмотрим на Staging.json :

{
  "baseUrl": "http://localhost:3000",
  "env": {
    "env": "staging",
    "apiUrl": "https://staging-api.com/api/v1",
  }
}

И Производство.json :

{
  "baseUrl": "http://localhost:3000",
  "env": {
    "env": "production",
    "apiUrl": "https://api.com/api/v1",
  }
}

(!) Убедитесь, что вы храните свои переменные ENV внутри эн объект

Затем обновите сценарии Cypress в Package.json Чтобы убедиться, что вы запускаете Cypress с необходимой конфигурацией для каждой Env:

"scripts": {
 "cypress:run:staging": "cypress run --env configFile=staging",
 "test:e2e:staging:run": "start-server-and-test 'npm run start' http://localhost:3000 'npm run cypress:run:staging'",

 "cypress:run:production": "cypress run --env configFile=production",
 "test:e2e:production:run": "start-server-and-test 'npm run start' http://localhost:3000 'npm run cypress:run:production'",
}

// same approach could be used for "cypress open" command.

Модуль «Start-Server-and-test» запускает ваше приложение и сразу после того, как это запускает тесты Cypress.

Тогда обновление src/cypress/plugins/index.js со следующим кодом:

const fs = require('fs')
const path = require('path')

function getConfigurationByFile(fileName) {
  const pathToConfigFile = path.resolve(__dirname, `../config/${fileName}.json`);
  let rawData;
  try {
    rawData = fs.readFileSync(pathToConfigFile);
  } catch (e) {
    console.error(e);
  }
  return JSON.parse(rawData);
}

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // this value comes from *cypress run --env configFile=staging*
  const configFile = getConfigurationByFile(config.env.configFile || 'test');

  return { ...config, ...configFile };
};

Большой! Итак, теперь, когда мы работаем с Cypress с необходимым конфигурацией ENV, мы можем использовать значения из этих конфигураций в наших тестах.

Если вы все сделали правильно, то вы можете извлечь переменные, выполнив следующее:

const { apiUrl, env } = Cypress.env();
// to extract baseUrl variable you should use Cypress.config()
// const { baseUrl } = Cypress.config();

Изменить значения Mitchture на лету на основе ENV

В основном светильники используется, когда вам нужно издеваться над ответом API, что не рекомендуется, хотя Но когда у вас есть несколько среде рано или поздно, вы столкнетесь с проблемой, когда одни и те же запросы возвращают одни и те же данные для каждой Env, кроме нескольких значений (например. id ) И вы можете не захотеть дублировать весь прибор.

В этом случае все, что вам нужно сделать, это извлечь приспособление и варитную переменную ENV; Затем обновите необходимое значение на лету в тестовом примере:

describe('it should test smth', function() {
  beforeEach(() => {
    // user is a env variable
    const { user: userEnv } = Cypress.env();

    cy.fixture('user.json').then(user => {
      user.id = userEnv.id; // updating user id
      // use updated fixture here (e.g. `cy.intercept`)
    });
  });
});

(!) Если вы используете до начала , убедитесь, что вы оберните его описывать , поэтому это не повлияет на другие тесты.

Вот ссылка на приспособления документов

Ихтимический ответ API во всем мире

Чтобы загнать сетевой запрос по всему миру, вы должны открыть src/cypress/support/index.js Файл и добавьте следующий код:

beforeEach(() => {
  cy.intercept({ url: `${apiUrl}/profile*`, middleware: true }, req => {
    req.reply({
      fixture: 'getProfile.json',
    });
});

Вот ссылка на Итерцепт документов

Пользовательские команды

Пользовательские команды в Cypress не позволяют вам добавить код шаблона в ваши тесты. Взгляните на этот файл:

 // you can turn this piece of code
 it('should fill in discount form', function() {
    cy.get('').type('test@test.com');
    cy.get('').type('1231231212');
    cy.get('').click({ force: true });
    cy.findByText(/Save/i).click({ force: true });
    // ...rest of the test
  });

// into a single line
it('should fill in discount form', function() {
 cy.fillDiscountForm();
 // ...rest of the test
});

Создать cy.filldiscountform () Команда вы должны перейти в файл по адресу src/cypress/support/commands.js и создать пользовательскую команду там:

Cypress.Commands.add('fillDiscountForm', function() {
  cy.get('').type('test@test.com');
  cy.get('').type('1231231212');
  cy.get('').click({ force: true });
  cy.findByText(/Save/i).click({ force: true });
});

Вот и все! Теперь вы можете использовать cy.filldiscountform () в любом тесте.

Вот ссылка на пользовательские команды

В ожидании запроса

Перед тем, как ваше приложение отобразит какие -либо данные, оно, вероятно, получит их с сервера. Что если у вас плохое подключение к Интернету, и все ваши тесты проваливаются из -за незаконченных запросов API и отсутствия данных для отображения? В этом случае, и, вероятно, каждый раз, когда вы делаете звонок API, вы должны ждать ( cy.wait ) для вызова API, чтобы закончить, прежде чем делать какие -либо утверждения.

it('should fill in discount form', function() {
  cy.intercept(`${apiUrl}/settings`).as('getSettings');
  cy.visit(`/settings-page`);
  // once a request to get settings responds, 'cy.wait' will resolve
  cy.wait('@getSettings');
  // rest of the test
  // cy.contains(/edit settings/i).click({ force: true });
});

Все, что нам нужно сделать, это зарегистрировать перехват перед посещением страницы настроек. Как только мы посетим страницу настроек, она запустит Получить $ {apiurl}/settings Запрос, и Cypress будет ждать, пока он не закончится, и только после этого продолжит тестирование.

Кроме того, если вызов API по какой -то причине не удастся, то Cypress отобразит ошибку, и его будет намного проще.

Вот ссылка на Подождите документы

Обложка изображения Tianyi Ma

Оригинал: “https://dev.to/ryabinin/cypress-testing-5-tips-you-may-find-useful-2i1j”

Оглавление:

Переменные среды

Изменить значения Mitchture на лету на основе ENV

Ихтимический ответ API во всем мире

Пользовательские команды

В ожидании запроса

Читайте ещё по теме: