1. Основы современного JavaScript: синтаксис ES6+, работа с массивами и асинхронность
Основы современного JavaScript: синтаксис ES6+, работа с массивами и асинхронность
Добро пожаловать в курс JavaScript и TypeScript для автоматизации тестирования. Это первая статья, и мы начнем с фундамента, на котором строится вся современная веб-разработка и автоматизация.
Почему именно JavaScript (и его «старший брат» TypeScript)? Потому что это язык веба. Если вы пишете автотесты для браузера (UI) или тестируете API Node.js сервисов, знание внутренней кухни JS позволит вам писать стабильные, быстрые и поддерживаемые тесты. Современные инструменты, такие как Playwright, Cypress или WebdriverIO, требуют уверенного владения синтаксисом ES6+.
В этой статье мы разберем ключевые нововведения стандарта ECMAScript 2015 (ES6) и более поздних версий, научимся эффективно работать с данными в массивах и, самое главное, разберем асинхронность — тему, без которой невозможно написать ни один стабильный автотест.
Переменные: прощай, var
В старом JavaScript для объявления переменных использовалось ключевое слово var. У него было много проблем, связанных с областью видимости, что часто приводило к трудноуловимым ошибкам. В современном стандарте мы используем let и const.
const (Константа)
Это ваш выбор по умолчанию. Если вы создаете переменную и не планируете переприсваивать ей значение (например, селектор кнопки или базовый URL), используйте const.
Важно понимать: const запрещает переприсваивание самой переменной, но если в переменной лежит объект или массив, их содержимое менять можно.
let (Переменная)
Используйте let только тогда, когда значение переменной действительно будет меняться в процессе выполнения кода. Например, счетчик в цикле или переменная, хранящая текущий статус теста.
Стрелочные функции (Arrow Functions)
Стрелочные функции сделали код лаконичнее и решили старую проблему с потерей контекста this (хотя в автотестах проблема this встречается реже, краткость очень важна).
Классическая функция:
Стрелочная функция:
Если тело функции состоит из одной строки, можно убрать фигурные скобки и слово return — возврат значения произойдет автоматически (неявный возврат):
В тестах это выглядит очень элегантно, например, при проверке условий ожиданий.
Шаблонные строки (Template Literals)
Раньше для склеивания строк мы использовали оператор +. Это было неудобно, особенно при формировании сложных локаторов или сообщений об ошибках.
Теперь мы используем обратные кавычки (backticks) ` ` и конструкцию {elementId}"];
console.log(Поиск элемента с селектором: ${selector});
javascript
const response = {
id: 101,
name: 'Test User',
email: 'test@example.com',
role: 'admin'
};
// Старый способ // const id = response.id; // const email = response.email;
// Новый способ const { id, email } = response;
console.log(id, email); // 101, 'test@example.com' javascript const defaultUser = { name: 'User', password: '123', role: 'user' };
// Создаем админа на основе обычного юзера const adminUser = { ...defaultUser, role: 'admin' };
console.log(adminUser); // { name: 'User', password: '123', role: 'admin' } javascript const prices = [100, 200, 300]; const pricesWithTax = prices.map(price => price * 1.2); // [120, 240, 360] javascript const elements = [ { id: 1, visible: true }, { id: 2, visible: false }, { id: 3, visible: true } ];
const visibleElements = elements.filter(el => el.visible);
// [{ id: 1, visible: true }, { id: 3, visible: true }]
javascript
const users = [{ name: 'Alice' }, { name: 'Bob' }];
const bob = users.find(user => user.name === 'Bob');
// { name: 'Bob' }
javascript
// Объявляем асинхронную функцию теста
async function testLogin() {
// Ждем, пока браузер откроет страницу. Код дальше не пойдет, пока это не случится.
await browser.open('/login');
// Ждем, пока найдем элемент и введем текст
await browser.type('#username', 'admin');
await browser.type('#password', '12345');
// Ждем клика
await browser.click('#submit-btn');
// Ждем появления элемента на новой странице
const welcomeMessage = await browser.getText('#welcome');
if (welcomeMessage === 'Hello, admin') {
console.log('Test Passed');
}
}
javascript
async function getData() {
try {
const response = await api.get('/users');
console.log(response.data);
} catch (error) {
console.error('Не удалось получить данные:', error);
}
}
`
Заключение
Мы рассмотрели основные кирпичики современного JavaScript:
* let и const для управления данными.
* Стрелочные функции для краткости.
* Шаблонные строки для динамического текста.
* Методы массивов map, filter, find для работы с коллекциями.
* async/await` для управления потоком выполнения в тестах.
Эти знания — абсолютный минимум для старта. В следующей статье мы поговорим о том, как добавить строгую типизацию в этот хаос с помощью TypeScript, и почему это спасет вам сотни часов отладки.