✔ Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript

В создании автоматизированных e2e-тестов для сложных систем есть много трудностей. Одна из них — “идеальное” окружение. Это окружение должно быть полностью под вашим контролем и включать многие (если не все) характеристики окружения разработки или продакшн-окружения.

На практике это часто не так. Окружение требует регулярного контроля, сброса данных и настройки требований для каждого теста “на лету”.

В случае онлайн-приложений, основанных на REST-архитектуре и запросах API, мы можем обойти эту проблему и приводить систему в необходимое состояние перед каждым тестом или набором тестов.

В этом примере я воспользуюсь Playwright с модулем запросов, который он предоставляет для отправки вызовов API.

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

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

▪Читать

@javascriptv

🔧 Chrome for Testing — новая версия Chrome, специально предназначенная для тестирования веб-приложений и автоматизации.

Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику.

Читать

Minimalist Thermostat - Регулировка температуры, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/jkantner/pen/rNpbMjO

@javascriptv

🖼Стек вызовов JavaScript: объяснение с помощью иллюстраций

▪Типичный случай

В случае ниже каждая функция завершается после выполнения всех строк кода внутри нее.
function defense() {
console.log('I am the defense attorney');
}

function prosecution() {
console.log('I am the prosecutor');
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

▪Более интересный случай

В данном примере — вызов функции внутри другой функции.
function callingToWitness(witnessNumber) {
console.log('Calling to witness number ' + witnessNumber);
}

function defense() {
callingToWitness(1);
callingToWitness(2);
}

function prosecution() {
callingToWitness(3);
callingToWitness(4);
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

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

Каждый “бокс” выполняет код внутри себя. При вызове функции создается новый “бокс” внутри нее. Если есть простая команда, например console.log, она просто выполняется. Выполнив весь код, “бокс” покидает стек.


Что такое “боксы”? Зачем нужны контексты выполнения?

▪Читать

@javascriptv

Jello Tab Bar - красивый анимированный tabbar, написанный с помощью SVG, CSS и JavaScript

https://codepen.io/oey_amir/pen/xxpZgEW

@javascriptv

Ghost Card - эффектная карточка с 3D эффектом.

https://codepen.io/pizza3/pen/pobevYW

@javascriptv

DeepScan - полезный инструмент, который проводит анализ исходного кода.

Программа отлично работает в обнаружении возможных ошибок и уязвимостей в JavaScript приложениях.

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

https://deepscan.io/

@javascriptv

Yotako.io — крутой инструмент дизайна в код с помощью искусственного интеллекта

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

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

Стоимость: #бесплатно (но есть платные тарифы).

#дизайн #code #ии

@javascriptv

Microsoft Homepage Clone - Клон домашней страницы Microsoft. Реализована с помощью CSS и Js.

https://codepen.io/bradtraversy/pen/ZEGGNRb

@javascriptv

Сбер открыл доступ к новым нейролингвистическим моделям

Сбер выпустил модель ruGPT-3.5 13B для генерации русского текста и модель mGPT 13B для генерации текста на 61 языке.

Модель ruGPT-3.5 13B оснащена 13 миллиардов параметров и может генерировать текст на русском, английском, а также неплохо разбирается в языках программирования. Модель mGPT 13B доступна по открытой лицензии MIT и может генерировать текст на 61 языке, в том числе на языках стран СНГ и малочисленных этнических групп в России.

«Сбер как ведущая технологическая компания выступает за открытость технологий и обмен опытом с профессиональным сообществом, ведь любые разработки и исследования имеют ограниченный потенциал в замкнутой среде. Поэтому, мы уверены, что публикация обученных моделей подстегнёт работу российских исследователей и разработчиков, нуждающихся в сверхмощных языковых моделях, создавать на их базе собственные технологические продукты и решения», —следует из заявления старшего вице-президента, CTO, руководитель блока «Технологии» Сбера Андрея Белевцева.

@javascriptv

49. parallax bird - красивый параллакс, сделанный с помощью Less и библиотеки Three.js

https://codepen.io/ycw/pen/OJpPmOq

@javascriptv

Hex/RGB Auto Color Converter in Vue - конвертор цветов из HEX в RGB, выполненный с помощью SCSS и библиотеки Vue.js.

https://codepen.io/collinsworth/pen/WNXxQVP

@javascriptv

👨‍💻Как работает JavaScript Proxy

• Первый шаг в работе с JavaScript Proxy — создание прокси-объекта с помощью синтаксиса new Proxy(). Этот синтаксис позволяет определить целевой объект и объект-обработчик, содержащий ловушки — специальные методы, которые перехватывают операции с прокси и позволяют настраивать их поведение.

Например, ловушка get перехватывает доступ к свойствам прокси-объекта. Определив эту ловушку, можно настроить реакцию прокси при обращение к свойству. Аналогично, ловушка set перехватывает присвоение свойства, позволяя валидировать или изменить присвоенное значение.

• В целом, ловушки в контексте JavaScript Proxy — это специальные методы, которые действуют как посредники, перехватывая и позволяя настраивать такие действия с прокси-объектом, как доступ к свойствам и присвоение. Они предоставляют разработчикам тонкий контроль над поведением прокси, позволяя настраивать и манипулировать им по мере необходимости.

Пример:
const target = {
name: 'Hossein',
age: 26
};

const handler = {
get(target, property) {
console.log(`Getting property: ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting property: ${property} = ${value}`);
target[property] = value;
}
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Вывод: Получение свойства: name, Hossein
proxy.age = 30; // Вывод: Установка свойства: age = 26
console.log(proxy.age); // Вывод: получение свойства: age, 30

▪️Здесь ловушка set перехватывает присвоение свойства прокси-объекту и регистрирует присвоенное свойство и значение, прежде чем изменить его в целевом объекте.

Используя эти и другие ловушки, можно эффективно настраивать и контролировать поведение прокси-объектов в соответствии с потребностями конкретной разработки.

Перехват операций с объектами с использованием прокси

• JavaScript Proxy позволяет перехватывать и настраивать различные операции с объектами. Рассмотрим несколько примеров.

Удаление свойства:
const target = {
name: 'Hossein',
age: 26
};

const handler = {
deleteProperty(target, property) {
console.log(`Deleting property: ${property}`);
delete target[property];
}
};

const proxy = new Proxy(target, handler);

delete proxy.age; // Вывод: Удаление свойства: age
console.log(proxy); // Вывод: { name: 'Hossein' }

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

• Вызов функции:

const target = {
sum: (a, b) => a + b
};

const handler = {
apply(target, thisArg, argumentsList) {
console.log(`Calling function: ${target.name}`);
return target.apply(thisArg, argumentsList);
}
};

const proxy = new Proxy(target.sum, handler);

console.log(proxy(2, 3)); // Вывод: Вызов функции: sum, 5

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

📌Продолжение

@javascriptv

💡 Newton's Light Bulbs - изящная анимация лампочки Ньютона. Реализована с помощью CSS и Js.

https://codepen.io/jh3y/pen/abzeaWJ

@javascriptv

Expanding Button - красивая анимированная кнопка с различными ссылками на медиа. Реализована с помощью SCSS, Pug и JavaScript.

https://codepen.io/abh1nash/pen/eYjQgEN

@javascriptv

⚡ Интересное исследование производительности анимации на основе скролла страницы

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

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

#javascript #api #css #web

@javascriptv