Как использовать кипарис? Пошаговое руководство

Cypress — это среда сквозного тестирования Javascript с открытым исходным кодом, которая упрощает тестирование всего, что запускается в браузере. Давайте создадим новый проект в Cypress как новичок. Убедитесь, что вы установили npm, прежде чем начать с нашего пошагового руководства.

Установить Cypress

1. Создайте папку для проекта, назовите ее «cypress-test».
2. Войдите в эту папку через CMD.
3. Запустите команду «npm init» в этой папке.
4. Запустите команду «npm install cypress — save-dev» в этом каталоге папки (это установит Cypress локально как зависимость от разработчиков для вашего проекта).
5. После добавления нового проекта Cypress автоматически создаст предложенную структуру папок. По умолчанию он создаст:

/cypress-test
/cypress
 /fixtures
    - example.json
    /integration
    /examples
           - actions.spec.js
           - aliasing.spec.js
           - assertions.spec.js
           - connectors.spec.js
           - cookies.spec.js
           - cypress_api.spec.js
           - files.spec.js
           - local_storage.spec.js
           - location.spec.js
           - misc.spec.js
           - navigation.spec.js
           - network_requests.spec.js
           - querying.spec.js
           - spies_stubs_clocks.spec.js
           - traversal.spec.js
           - utilities.spec.js
           - viewport.spec.js
           - waiting.spec.js
           - window.spec.js
   /plugins
          - index.js
   /support
          - commands.js
          - index.js
/node_modules
- cypress.json
- package.json
- package-lock.json
/fixture — Fixtures are used as external pieces of static data that can be used by your tests
/integration —  To store test scripts
/plugins —  To add the plug-in of extend cypress behavior
/support —  The support file is a great place to put reusable behavior such as Custom Commands or global overrides that you want applied and available to all of your spec files.
cypress.json — This file is used to store the projectId (after configuring your tests to record) and any configuration values you supply

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

Открыть Cypress

1. Запустите команду «npx cypress open» в этой папке.
2. Через мгновение запустится Cypress Test Runner.

Попробуйте запустить скрипт

1. Нажмите на вкладку Runs вашего проекта в Test Runner.
2. Затем будет запущен браузер Chrome для запуска этого скрипта.

Введение в распространенные команды

visit() — Visit a remote URL
get() — To find DOM elements
contains — Get the DOM element containing the text
find() — Get the descendent DOM elements of a specific selector
click() — Click on the elements that you already got
type() — The input text
should() — assertions
fixture() — Load a fixed set of data located in a file

Попробуйте написать сценарий

1. Настройте интеллектуальное завершение кода в среде разработки проекта.

Добавление tsconfig.json в папку cypress со следующей конфигурацией должно заставить работать интеллектуальное завершение кода.

{
"compilerOptions": {
"allowJs": true,
"baseUrl": "../node_modules",
"types": [
"cypress"
]
},
"include": [
"**/*.*"
]
}

Демонстрация функций:

• Автозаполнение при наборе команд Cypress — https://docs.cypress.io/img/snippets/intellisense-cypress-assertion-matchers.45a8f7fe.mp4
• Справка по подписи при написании и наведении на команды Cypress — https://docs.cypress.io/img/snippets/intellisense-method-signature-examples.bf375f01.mp4
• Автозаполнение при вводе цепочек утверждений, в том числе отображение утверждений DOM только при тестировании элемента DOM — https://docs.cypress.io/img/snippets/intellisense-assertion-chainers.095d077e.mp

2. Настройте интеллектуальное завершение кода в среде разработки Visual Studio Code.

Для настройки в Visual Studio Code вы можете открыть ‘Preferences / Settings / User Settings' и добавить свойство json.schemas.

{
"json.schemas": [
{
"fileMatch": [
"cypress.json"
],
"url": "https://on.cypress.io/cypress.schema.json"
}
]
}

Демонстрация функций:

• Справка по свойствам при написании и наведении на ключи конфигурации — https://docs.cypress.io/img/snippets/intellisense-cypress-config-tooltips.6d82a441.mp4
• Список свойств с интеллектуальными настройками по умолчанию — https://docs.cypress.io/img/snippets/intellisense-config-defaults.bcdc572a.mp4

3. Напишите скрипт в «/cypress-test/cypress/integration/», имя — «search_via_baidu.js», затем запустите.

describe('first test', function(){
it('baidu search', function(){
const searchContent = 'Cypress test'
cy.visit('http://www.baidu.com')
cy.get('[id="kw"]').type(searchContent)
cy.get('[type="submit"]').click()
cy.title().should('include',searchContent )
})
})

Параметризация констант

1. Добавление файла constants.json в папку cypress/fixture:

{
"elements":{
"search_box":"[id='kw']",
"search_submit":"[type='submit']"
},
"variable":{
"search_value":"cypress test"
}
}

2. Теперь давайте изменим скрипт на следующий код:

describe('first test', function(){
it('baidu search', function(){
const searchContent = 'Cypress test'
cy.visit('https://www.baidu.com')
cy.fixture('constants.json').then(constants => {
cy.get(constants.elements.search_box).type(constants.variable.search_value)
cy.get(constants.elements.search_submit).click()
cy.title().should('include',constants.variable.search_value )
})
})
})

3. Сохраните сценарий и запустите его снова, чтобы увидеть результаты.

Настройка переменных среды

1. Добавьте следующее в cypress.json:

{
"baseUrl": "https://www.baidu.com/",
"projectId": "b5jd3y"
}

2. Теперь давайте изменим скрипт на следующий код:

describe('first test', function(){
it('baidu search', function(){
const searchContent = 'Cypress test'
cy.visit('')
cy.fixture('constants.json').then(constants => {
cy.get(constants.elements.search_box).type(constants.variable.search_value)
cy.get(constants.elements.search_submit).click()
cy.title().should('include',constants.variable.search_value )
})
})
})

3. Сохраните сценарий и запустите его снова, чтобы увидеть результаты.

Синтаксис BDD

1. Cypress использует синтаксис Mocha bdd, который идеально подходит как для интеграции, так и для модульного тестирования. Все тесты, которые вы будете писать, основаны на базовой системе, которую предоставляет Mocha, а именно:

describe()

context()

it()

before()

beforeEach()

afterEach()

after()

.only()

.skip()

context() идентично describe(), а specify() идентично it(), так что выбирайте терминологию, которая вам больше подходит.

Cypress также предоставляет крючки (позаимствованные у Mocha).

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

describe('Hooks', function() {
before(function() {
// runs once before all tests in the block
})
after(function() {
// runs once after all tests in the block
})
it(function() {
// runs once after all tests in the block
// The script function gets the topic content
})
it.only(function() {
// runs once after all tests in the block
// All code under it() does not execute except for code under it()
})
it.skip(function() {
// runs once after all tests in the block
// The code under it skips execution
})
beforeEach(function() {
// runs before each test in the block
})
afterEach(function() {
// runs after each test in the block
})
})

2. Теперь давайте попробуем изменить скрипт, чтобы изменить следующий код:

describe('first test', function(){
before('load baidu page', function() {
cy.fixture('constants.json').as('constants')
cy.visit('')
})
it('baidu search',function() {
const constants = this.constants
cy.get(constants.elements.search_box).type(constants.variable.search_value)
cy.get(constants.elements.search_submit).click()
})
after('check title', function() {
const variable = this.constants.variable
cy.title().should('include',variable.search_value )
})
})

Создание пользовательских команд

Cypress поставляется с собственным API для создания пользовательских команд и перезаписи существующих команд. Встроенные команды Cypress используют тот же API, который определен ниже.

Отличное место для определения или перезаписи команд — ваш файл cypress/support/commands.js, так как он загружается до того, как какие-либо тестовые файлы будут оценены с помощью оператора импорта в cypress/support/index.js.

1. Добавьте следующий код в cypress/support/command.js:

Cypress.Commands.add("baiduSearch", (searchValue) => {
cy.fixture('constants.json').then(constants => {
cy.get(constants.elements.search_box).type(searchValue)
cy.get(constants.elements.search_submit).click()
})
})

2. Теперь попробуем изменить скрипт, изменив следующий код:

describe('first test', function(){
before('load baidu page', function() {
cy.fixture('constants.json').as('constants')
cy.visit('')
})
it('baidu search',function() {
const constants = this.constants
cy.baiduSearch(constants.variable.search_value)
})
after('check title', function() {
const variable = this.constants.variable
cy.title().should('include',variable.search_value )
})
})

Запустите скрипт из командной строки

cypress run --- Run all scripts
cypress run --spec 'cypress/integration/search_via_baidu.js' --- 'Run tests specifying a single test file to run instead of all tests'
cypress run --spec 'cypress/integration/examples/*' --- Run tests specifying a glob of where to look for test files (Note: quotes required)
cypress run --spec 'cypress/integration/examples/actions.spec.js,cypress/integration/examples/files.spec.js' --- Run tests specifying multiple test files to run

Хотите узнать больше о Cypress?

Подпишитесь на Технический университет rb2 на Medium.com! Скоро мы поделимся другими статьями на эту тему.