Cypress — Интеграционное тестирование

Введение

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

Повестка дня

• Интеграционное тестирование
• Тестирование кипариса
• Создайте приложение с помощью Flask и React
• Протестируйте приложение с Cypress

Интеграционное тестирование

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

Интеграционное тестирование отличается от модульного тестирования тем, что модульное тестирование фокусируется на изолированном тестировании отдельных модулей кода. Напротив, интеграционное тестирование фокусируется на тестировании взаимодействий и интерфейсов между различными единицами кода. Модульное тестирование обычно выполняется разработчиками, в то время как отдельная группа тестирования часто выполняет интеграционное тестирование. Кроме того, модульное тестирование обычно выполняется на ранней стадии процесса разработки, а интеграционное тестирование — на более позднем этапе процесса разработки.

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

Установить Кипарис

Чтобы установить Cypress, в вашей системе должны быть установлены Node.js и npm (менеджер пакетов Node). Затем вы можете использовать следующую команду для установки Cypress:

npm install cypress --save-dev

Cypress использует Mocha в качестве средства запуска тестов и Chai в качестве библиотеки утверждений. Чтобы создать новый тестовый файл, вы можете использовать следующую команду:

npx cypress open

Эта команда создает новую папку с именем «кипарис» в каталоге вашего проекта, где вы можете найти тестовые файлы.

Пишите тест-кейсы.

• Cypress использует JavaScript API для взаимодействия с браузером, поэтому вы можете писать тестовые примеры с помощью JavaScript.
• Например, чтобы протестировать функцию входа на веб-сайт, вы можете написать тестовый пример, который имитирует пользователя, который вводит свое имя пользователя и пароль и нажимает кнопку входа. Затем вы можете утверждать, что пользователь перенаправляется на правильную страницу после успешного входа в систему.

Запустите тестовые случаи

Для запуска тестовых случаев вы можете использовать следующую команду:

npx cypress run

Эта команда запускает все тестовые примеры в папке «cypress/integration».

Подтвердите результаты

• Cypress использует библиотеку утверждений Chai, чтобы утверждать, что результаты тестов соответствуют ожидаемым результатам.
• Например, после успешного входа в систему вы можете утверждать, что пользователь перенаправлен на правильную страницу, проверив URL-адрес текущей страницы.

Взаимодействие с веб-страницей

Cypress упрощает взаимодействие с веб-страницей с помощью своего API. Вы можете использовать метод cy.get() для выбора элементов на странице и методы .type(), .click() и .should() для имитации взаимодействия с пользователем и подтверждения результатов.

Например, вы можете использовать cy.get('#username').type('myusername') для ввода текста в поле ввода и cy.get('#login-button').click() для нажатия кнопки.

Отладка

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

Дополнительные возможности

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

Создайте приложение с помощью Flask и React.

Пришло время создать приложение с помощью Flask и React и выполнить интеграционное тестирование с помощью Cypress!

Создайте новый каталог для своего проекта, перейдите в него и создайте новую виртуальную среду с помощью команды python -m venv env

Активируйте виртуальную среду с помощью команды source env/bin/activate. Установите Flask с помощью pip

pip install flask flask-cors

Создайте новый файл с именем app.py и импортируйте Flask from flask import Flask, jsonify. Создайте новое приложение Flask и определите маршрут, который возвращает некоторые данные в формате JSON:

from flask import Flask, jsonify
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/data")
@cross_origin()
def data():
    return jsonify({"message": "Hello, World!"})
if __name__ == "__main__":
    app.run(debug=True)

Создайте новый каталог для своего приложения React и перейдите к нему. Используйте create-react-app для создания нового приложения React npx create-react-app my-app

В новом каталоге вы можете запустить сервер разработки с помощью команды npm start.

В приложении React вы можете сделать вызов API к конечной точке Flask и отобразить данные на внешнем интерфейсе. Например, вы можете создать новый компонент с именем Data.js и сделать вызов API в хуке useEffect:

import React, { useState, useEffect } from "react";
function Data() {
  const [data, setData] = useState({});
  useEffect(() => {
    fetch("http://localhost:5000/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);
  return <div>{data.message}</div>;
}
export default Data;

Теперь, когда ваше приложение запущено, вы можете начать писать тесты Cypress. Во-первых, вам нужно будет установить Cypress: npm install cypress --save-dev.

Затем создайте новый каталог с именем cypress в корне вашего проекта и запустите npx cypress open, чтобы открыть Cypress Test Runner:

Вы будете перенаправлены на следующую страницу:

Выберите E2E-тестирование:

Нажмите «Продолжить». На изображении выше вы можете увидеть образец теста.

Теперь мы напишем собственный тест с помощью Cypress. В Cypress Test Runner вы можете создать новый тестовый файл, нажав кнопку New Spec.

Добавьте код во вновь созданный тестовый файл из редактора по вашему выбору. Я выбрал vscode, так как редактирую на нем свои тесты. Перед запуском теста перейдите на localhost:3000 и проверьте, правильно ли отображается веб-страница. Если это так, вы сможете увидеть следующий экран:

Пишите тестовые случаи

Напишите тестовые случаи, которые выполняют действия во внешнем интерфейсе и утверждают, что отображаются правильные данные. Например, вы можете проверить, что правильный текст отображается на странице после вызова API:

describe("Data", () => {
  it("displays data", () => {
    cy.visit("http://localhost:3000");
    cy.contains("Hello, World!");
  });
});

Запустите приведенный выше тестовый файл. Вы получите следующий вывод:

Обновите тестовый файл, чтобы проверить, содержит ли страница фразу «Python Code Nemesis».

describe("Data", () => {
  it("displays data", () => {
    cy.visit("http://localhost:3000");
    cy.contains("Hello, World!");
    cy.contains("Python Code Nemesis");
  });
});

После повторного запуска теста вы сможете увидеть следующий экран:

Протестируйте серверную часть Flask

Затем вы можете использовать метод Cypress cy.request() для отправки запросов на конечную точку Flask и подтверждения правильности данных ответа.

describe("Data API", () => {
  it("returns data", () => {
    cy.request("http://localhost:5000/data").then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body).to.have.property("message", "Hello, World!");
    });

Когда мы запускаем этот тест, мы получаем следующий ответ:

Весь код для этого руководства доступен здесь, на Github:

https://github.com/PythonCodeNemesis/Cypress_Testing_Demo

Заключение

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

Мы продемонстрировали, как настроить простое веб-приложение с интерфейсом и серверной частью с использованием React и Flask. Затем мы использовали Cypress для написания и запуска интеграционных тестов для нашего приложения, охватывающих как внешние, так и внутренние компоненты.

Следуя примерам из этой статьи, вы должны понять, как писать интеграционные тесты для своих веб-приложений с помощью Cypress. С полученными знаниями вы сможете писать комплексные тесты для своих приложений, чтобы убедиться в их функциональности и качестве.

Это все для этой статьи! Не стесняйтесь оставлять отзывы или вопросы в комментариях. Если вы нашли это захватывающим чтением, хлопайте в ладоши и подписывайтесь! Ваше здоровье!