В процессе автоматизированного тестирования веб-приложений часто возникает необходимость в авторизации пользователей на сайте. Для выполнения этого шага с помощью WebDriverIO можно использовать несколько подходов, в зависимости от специфики тестируемого приложения и методов авторизации, которые оно использует. Рассмотрим основные способы реализации авторизации и работы с ними в WebDriverIO.
Самый распространённый способ авторизации — это использование стандартной формы входа на сайт. Для взаимодействия с элементами формы (поля для ввода логина и пароля, кнопка отправки) WebDriverIO предоставляет простые и удобные методы.
Пример авторизации через форму:
describe('Авторизация на сайте', () => {
it('Пользователь может войти в систему', async () => {
// Открытие страницы авторизации
await browser.url('https://example.com/login');
// Заполнение поля логина
const usernameField = await $('#username');
await usernameField.setValue('testuser');
// Заполнение поля пароля
const passwordField = await $('#password');
await passwordField.setValue('password123');
// Нажатие на кнопку входа
const loginButton = await $('button[type="submit"]');
await loginButton.click();
// Проверка успешной авторизации
const welcomeMessage = await $('#welcome-message');
await expect(welcomeMessage).toHaveTextContaining('Добро пожаловать');
});
});В этом примере используется стандартная форма с полями для ввода
логина и пароля, а также кнопка для отправки формы. WebDriverIO
предоставляет доступ к элементам через селекторы, такие как
#username и #password. Для симуляции ввода
значений в поля применяется метод setValue(), а для клика
по кнопке — click().
Если необходимо избежать прямого взаимодействия с веб-страницей,
можно выполнить авторизацию через API. Это особенно полезно, когда
страница с формой входа занимает много времени на загрузку или если
хочется ускорить тесты. Для этого можно отправить запрос через
библиотеку axios или встроенные функции WebDriverIO.
Пример авторизации через API:
import axios from 'axios';
describe('API авторизация', () => {
it('Пользователь авторизуется через API', async () => {
const response = await axios.post('https://example.com/api/login', {
username: 'testuser',
password: 'password123',
});
expect(response.status).toBe(200);
expect(response.data.token).toBeDefined();
});
});Этот способ позволяет протестировать авторизацию без загрузки страницы, но важно учитывать, что API может отличаться по своей реализации, поэтому необходимо будет адаптировать запросы под конкретное приложение.
В некоторых случаях веб-приложение может использовать cookies для сохранения состояния авторизации. В таких случаях можно использовать WebDriverIO для работы с cookies, чтобы установить необходимые значения до начала теста.
Пример установки cookies для авторизации:
describe('Авторизация через cookies', () => {
it('Пользователь авторизуется с помощью cookies', async () => {
// Открытие страницы
await browser.url('https://example.com');
// Установка cookies
await browser.setCookies({
name: 'auth_token',
value: 'sampleAuthToken',
domain: 'example.com',
});
// Перезагрузка страницы
await browser.refresh();
// Проверка успешной авторизации
const userAvatar = await $('#user-avatar');
await expect(userAvatar).toBeDisplayed();
});
});В данном примере используется метод setCookies(),
который позволяет установить cookie, имитируя состояние авторизации. Это
решение удобно, когда нужно сразу получить доступ к авторизованному
пользователю, минуя процесс входа.
Системы SSO предоставляют возможность входа в несколько приложений с использованием единой учетной записи. В тестах для работы с такими системами нужно учитывать специфическую логику, которая может включать редиректы и дополнительные шаги аутентификации.
Для работы с SSO можно использовать WebDriverIO для автоматизации всех шагов входа, включая ввод данных на странице логина и переходы по редиректам.
Пример авторизации через SSO:
describe('Авторизация через SSO', () => {
it('Пользователь авторизуется через систему SSO', async () => {
// Открытие страницы входа
await browser.url('https://example.com/login');
// Перенаправление на страницу SSO
const ssoButton = await $('button.sso');
await ssoButton.click();
// Ввод данных на странице SSO
const ssoUsername = await $('#sso-username');
await ssoUsername.setValue('testuser');
const ssoPassword = await $('#sso-password');
await ssoPassword.setValue('password123');
const ssoLoginButton = await $('#sso-login');
await ssoLoginButton.click();
// Проверка успешной авторизации
const userProfile = await $('#user-profile');
await expect(userProfile).toBeDisplayed();
});
});Для SSO-тестирования часто требуются дополнительные шаги взаимодействия, такие как переходы между страницами или ожидание завершения редиректов.
Чтобы избежать повторной авторизации при каждом запуске тестов, можно использовать сохранение состояния авторизации. В WebDriverIO можно сохранять cookies или токены авторизации и использовать их в следующих тестах.
Пример сохранения и использования cookies:
describe('Сохранение состояния авторизации', () => {
it('Сохранение cookies после авторизации', async () => {
// Открытие страницы авторизации
await browser.url('https://example.com/login');
// Ввод данных и авторизация
const usernameField = await $('#username');
await usernameField.setValue('testuser');
const passwordField = await $('#password');
await passwordField.setValue('password123');
const loginButton = await $('button[type="submit"]');
await loginButton.click();
// Сохранение cookies
const cookies = await browser.getCookies();
// Сохранение cookies в файл или переменную для использования в следующем тесте
// Например, cookies могут быть записаны в файл, который позже будет загружен
// Завершаем тест
await browser.url('https://example.com/dashboard');
const dashboardTitle = await $('#dashboard-title');
await expect(dashboardTitle).toHaveTextContaining('Добро пожаловать');
});
});В этом примере сохраняются cookies после успешной авторизации, что позволяет в последующих тестах использовать их для имитации авторизованного состояния, избегая повторной авторизации.
При работе с WebDriverIO в CI/CD пайплайне важно обеспечить стабильность процесса авторизации. В таких системах часто используются переменные окружения для хранения учетных данных, что позволяет избежать жестко закодированных значений в тестах.
Пример использования переменных окружения:
describe('Авторизация с использованием переменных окружения', () => {
it('Пользователь может войти с использованием переменных окружения', async () => {
const username = process.env.USERNAME;
const password = process.env.PASSWORD;
await browser.url('https://example.com/login');
const usernameField = await $('#username');
await usernameField.setValue(username);
const passwordField = await $('#password');
await passwordField.setValue(password);
const loginButton = await $('button[type="submit"]');
await loginButton.click();
const userAvatar = await $('#user-avatar');
await expect(userAvatar).toBeDisplayed();
});
});Этот подход позволяет безопасно и гибко работать с данными для авторизации, особенно в условиях автоматизированных тестов в CI/CD.