Vue Academy · Урок

Сквозное тестирование

Проверяйте полные пользовательские сценарии с помощью сквозных тестов

Урок 3 из 313 шагов

«Сквозное тестирование» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Тестирование как пользователь

Сквозное тестирование управляет вашим настоящим приложением в настоящем браузере, нажимая кнопки и заполняя формы именно так, как это сделал бы пользователь. Оно проверяет, что всё — от интерфейса до серверной части — работает вместе.

Зачем нужны сквозные тесты?

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

Установка Cypress

Cypress — популярная платформа для сквозного тестирования с интерактивным средством запуска тестов. Установите её как зависимость для разработки и откройте средство запуска.

npm install -D cypress
npx cypress open

Структура теста Cypress

В тесте Cypress используется describe для группировки тестов и it для каждого сценария, что соответствует привычному синтаксису тестов.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

Переход на страницу

Используйте cy.visit, чтобы загрузить URL в браузере — это отправная точка большинства тестов.

cy.visit("http://localhost:5173/login")

Поиск элементов

cy.get выбирает элементы с помощью селектора CSS. Cypress автоматически ожидает появления элементов, уменьшая количество нестабильных тестов.

cy.get("input[name=email]")
cy.get("button[type=submit]")

Ввод в поля

Добавьте type к выбранному полю ввода, чтобы имитировать ввод с клавиатуры.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

Нажатие на элементы

Используйте click для взаимодействия с кнопками и ссылками, как это делал бы пользователь.

cy.get("button[type=submit]").click()

Проверка результата

После взаимодействия проверьте с помощью should, что теперь должен увидеть пользователь. Cypress повторяет проверки, пока они не пройдут или не истечёт время ожидания.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

Полный сквозной тест

Объединив шаги, вы получите понятный тест реального пользовательского сценария.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

Альтернатива Playwright

Playwright — ещё один мощный инструмент для сквозного тестирования с похожими концепциями: он запускает браузер, переходит по страницам, взаимодействует с ними и выполняет проверки. API отличается, но подход к тестированию остаётся тем же.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

Быстрая проверка

Проверьте свои знания о сквозном тестировании.

Ответь в интерактивном уроке

Итоги

Сквозные тесты управляют настоящим приложением в браузере. В Cypress структурируйте тесты с помощью describe/it, загружайте страницы через cy.visit, находите элементы с помощью cy.get, взаимодействуйте с ними через type и click, а затем проверяйте результат с помощью should. Playwright следует тем же принципам. Далее вы оптимизируете сборку и подготовите её к публикации.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Сквозное тестирование» бесплатный?

Да — полный текст урока «Сквозное тестирование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Сквозное тестирование»?

Проверяйте полные пользовательские сценарии с помощью сквозных тестов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Сквозное тестирование»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy