Современный подход к ручному тестированию

Написано Хуан Фернандес

Установка сцены

Мы все это видели, тем больше становится организация, тем сложнее она становится значимой и эффективной коммуникацией между командами. Это особенно очевидно, когда стимулы смещены. Часто команды развития стимулируются, чтобы построить как можно больше в кратчайшие сроки. С другой стороны, команды QA стимулируются, чтобы уменьшить присущий риск в кодовой базе/приложении до приемлемой степени. Проблема очевидна: тогда как команды развития оптимизируют для скорости, команды QA оптимизируют для правильности. Это смещение стимулов приводит к разочарованию и выгоранию между и внутри этих команд.

Это присущее трение между развитием и командами QA наиболее острыми при обнаружении ошибки. В то время профессионалы QA приоритетны приоритеты, указав исправленную ошибку. Напротив, разработчики могут противоречить доставкой новой функцией своевременно или задержать его в обмен на Begfix, что может занять пять минут или пять недель для реализации и не имеет четкого ROI.

Хотя аргумент может быть сделан, что правильная культура может [потенциально] предотвратить это, наш опыт, поговорив сотнями организаций, заключается в том, что, чаще всего, команды с конкурирующими стимулами ведут себя таким образом.

Состояние дел

Давайте посмотрим, что происходит сегодня, в любой данной организации, когда QA находит ошибку в приложении. Ради этого поста давайте притворяемся, что это приложение электронной коммерции.

Шаг 1: QA Контакты команды разработчика или разработки предположительно ответственный за исправление. Они делают это на коммуникационном инструменте, как Slack, или создавая проблему на трекере, подобном Jira.

Шаг 2: Профессионал QA затем доходит, чтобы поговорить с «командой Dev Checkout Dev».

Шаг 3: QA остается смущенным и не уверенным, как продолжить.

То, что будет следующим и далее между командами QA и разработки, которая пытается воспроизвести проблему в разных средах развития, в то время как обмениваться скриншотами и записями, а также попытка рыбы для соответствующих журналов очевидной проблемы под рукой. Все это витает головы против стены, потому что проблемы появляются только при, казалось бы, случайных обстоятельств, которые не могут быть определены. Кроме того, все, вероятно, что после дней с этим вопросом задерживается и подпрыгивая вокруг Джиры, ни одна команда развития уверенно не заявляла о владельце неисправности, не говоря уже о чём.

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

Можем ли мы сделать лучше?

Конечно можем! Но прежде чем я покажу вам, как, позвольте мне представиться: я хуан, и я работаю инженером программного обеспечения в неопределенных лабораториях. Мы работаем над инструментами разработчиков, и мы верим, что пришло время принципиально изменить способ тестирования и команды развития, и значительно улучшится, как организации проверяют свои приложения. В этом посте я хотел бы показать вам силу Область для ручного веб-тестирования.

Чтобы лучше объяснить наш подход, давайте пересмотрим наш предыдущий сценарий, на этот раз с применением охвата:

QA может обеспечить глубокую связь с отчетом о тестировании для разработчиков для анализа.

Все отчеты в области применения включают след, показывающий транзакцию, записанную во время выполнения теста.

Вердикт: Скриншоты и бревна, в то время как удобны, вряд ли достаточно иметь дело с большинством вопросов, что команда разработки станет каким-либо данным днем в современных современных приложениях. С помощью SCOPE мы делаем его тривиально легко для команд QA, чтобы обеспечить свои команды разработчиков с богатыми и углубленными видимостью, они должны исправить любой ручной тест и любую ошибку. Давайте посмотрим, как.

Внесение масштаба для хрома

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

Принимая во внимание, что многие из рамок, SDK и агентов по тестированию мы построили на сегодняшний день для разработчиков, это было ясно в начале того, что потребности и инструменты Qa совершенно разные. С помощью CAPOPE для Chrome мы хотели построить самый простой способ для того, чтобы кто-нибудь создал значимые тесты ручного браузера. Таким образом, единственное требование к использованию области использования Chrome — это (1) Установить наше расширение браузера, а (2) знать, как использовать веб-браузер.

Это действительно так просто:

После того, как кто-либо записывает ручной тест, используя объем для Chrome, отчет генерируется автоматически. Этот тестовый отчет включает в себя:

Действия пользователей, такие как клики или удары клавиатуры.
HTTP-запросы со своими заголовками и полезными нагрузками.
Ответы от бэкэнда и даже запросов баз данных увольняются в результате запроса.
Консольные журналы.
Исключения.

Наконец, каждый ручной тест поставляется с подробным отчетом, включая все, что захочет увидит, когда пытается отладить любую заданную регрессию. И лучше всего, это устраняет необходимость попытаться воспроизвести проблему под рукой. Есть также нет «Какой браузер вы использовали?» Или «Какой пользователь вы вошли как? » Все, что вам нужно понять, проблема в одной панели стекла. И легче, чем когда-либо знать, какую команду лучше всего подходит для исправления, или какая служба не виновата.

Как это устроено

Проще говоря: когда пользователь нажимает на кнопку «Начать запись», Объем Для хрома Начинает слушать и записывать все происходящее на вашей текущей вкладке.

Более подробно, чтобы сделать это, наши усилия тщательно:

Прослушайте и запишите пользовательские события, такие как щелчки мыши, удары клавиатуры и исключения, происходящие на вкладке.
Обезьяна патч XHR. и извлекать вводя код на вкладку под тестом. Каждый запрос создает новый пролет («Индивидуальная единица работы» в соответствии с OpenCentracing терминологии ), которые затем распространяются на бэкэнду.
Слушать main_frame Запросы (документ, который загружен для рамки верхнего уровня). Это первый запрос, который делает ваш браузер при переходе на новую страницу. Для этого мы используем Удлинитель WebRequest API Отказ

Конечно, это просто проблеск на том, что делает сферу хрома. Ничто из этого не было бы возможно без работы позади нашего Агент JavaScript , наши другие агенты ( Python , IOS , .СЕТЬ , Java , Голанг ), наша бэкэнда способна глотать и обработать тестовые данные и распределенные трассы, и наши специально построенные веб-интерфейсы для отображения тестов в интерактивном и структурированном виде.

Слияние Проверьте техническое дополнение ниже для получения дополнительной информации.

Что дальше?

С постоянно растущей сложностью современного программного обеспечения наступает больше, более сложные программные команды. Такими же командами работают над улучшением интерфейсов между распределенными службами, мы должны улучшить, как мы сотрудничаем и общаемся между командами. Мы верим Область применения для хрома Может помочь облегчить самые расстраивающие проблемы, связанные с отсутствием видимости в ручном тестировании и помогите мостику разрыва между QA и Dev.

Вы можете узнать больше о Область охвата хрома здесь Отказ

Техническое добавление: Технические задачи, с которыми сталкиваются при создании масштаба для хрома.

1. Пластирование обезьяны трудно

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

Например, рассмотрим класс с методом get_value Отказ Предположим, что этот метод делает запрос базы данных при вызове. Представьте, что вы сейчас являетесь единицей, тестируя свой класс: вы не хотите выполнять фактическую базу данных запроса, поэтому вы динамически замените get_value на заглушке, который возвращает некоторые данные издевательства.

Это может быть распространено на другие виды использования. Например, в веб-приложении вы можете заменить console.log По функции, которая не только входит не только сообщение, но также добавляет дату, при которой была вызвана функция.

Вот пример:

const log = console.log

console.log = function() {

  log.apply(console, [new Date().toISOString(), ...arguments])

}

Базовая заправка обезьян window.fetch Просто (обратите внимание, что это просто пример и не готов к тому, чтобы быть продуктивным кодом):

const oldFetch = window.fetch

window.fetch = (...args) => {

   // do something here
   return oldFetch(...args)

}

Вещи становятся интереснее, когда вы хотите сделать асинхронизацию там, как общение с Фоновый скрипт :

const oldFetch = window.fetch

 window.fetch = (...args) =>

  new Promise(resolve => {

   asyncCommWithBackground().then(newRequestInfo => {

    const newFetchArgs = [...args, ...newRequestInfo]

    resolve(oldFetch(...newFetchArgs))

   })

  })

Этот шаблон довольно мощный. Но с большой силой приходит большая ответственность. Патч обезьян, мы замедляем каждый запрос на активной вкладке, однако долго asynccommunicationskackground принимает, чтобы решить.

И вот пример делать что-то с результатом извлечения:

window.fetch = (...args) =>

 new Promise(resolve => {

  asyncCommWithBackground().then(newRequestInfo => {

   const newFetchArgs = [...args, ...newRequestInfo]

   resolve(oldFetch(...newFetchArgs)).then(fetchResult => {

    // do something with fetchResult

    return fetchResult 

   })

  })

 })

}

Вы можете немного упростить код Async/await , но вы должны быть осторожны. Вы, вероятно, хотите знать, не удалось ли ваша выборка, для которой вы будете использовать попробовать/поймать. Но если вы это сделаете, вы остановите исключения от распространения потребителю, который является сценарием, который вы хотите избежать. Самое главное, что нужно помнить здесь: заплатку обезьяны сделано правильно, должно быть прозрачным.

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

Если вы хотите немного глубже в этом шаблоне, мы создали репозиторий с помощью Малый проект функционирующего хромированного расширения Это задерживает все ваши извлекать Запросы. Шаблон выделен здесь Отказ

Альтернативой этому решению — использовать WebRequest API С крючками, как onbeforerseNdheaders. А на данный момент эта API не позволяет захвату полезных нагрузок в ответ, которая была требованием для объема.

2. Патч обезьян в браузере еще сложнее

Как получается, если вы хотите повлиять на окно Переменная вкладки, которую нам нужно для пропитания обезьян, A Сценарий контента недостаточно. Вам нужно выполнить код, как тот, который показан в здесь Отказ Это означает обработку вашего кода в виде строки. Есть некоторые альтернативы, такие как использование Функция. Тостронг () и Babel Macros Чтобы оценить переменные в сборке времени, но дополнительная сложность поражает цель, поскольку ваши запутрованные функции обезьяны не должны быть в любом случае.

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

3. Отправка ответов асинхронно

Ваши сценарии контента и введенный код будут общаться с вашим фоном через сообщение прохождение Отказ В какой-то момент ответы могут потребоваться некоторая асинхронная операция. Чтобы покинуть канал связи открыть, вам нужно вернуть правда Перед звонком sendresponse. . Больше этой картины здесь Отказ

4. Объединение вашего расширения

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

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

Samuelsimoes/Chrome-Extension-WebPack-Botherplate

Базовая фундаментная котельная для богатых расширений Chrome с помощью WebPack, чтобы помочь вам написать модульный и современный код JavaScript, легко загружать CSS и автоматическую перезагрузить браузер на изменениях кода.

Базовая основа для фундамента для насыщенных расширений Chrome с использованием WebPack Чтобы помочь вам написать модульный и современный код JavaScript, легко загрузить CSS и Автоматическая перезагрузить браузер по изменениям кода Отказ

Разработка нового расширения

Я предполагаю, что вы уже читали Документы WebPack и то Chrome расширение Документы.

Проверьте, есть ли ваша версия Node.js.
Клонировать репозиторий.
Установить пряжа .
Беги пряжа Отказ
Измените имя пакета и описание на package.json Отказ
Измените имя вашего расширения на SRC/Mainesest.json Отказ
Беги Бег пряжи Начало
Загрузите расширение на Chrome после
1. Доступ Chrome://расширения/
2. Проверьте режим разработчика
3. Нажмите на Загрузить распакованный расширение
4. Выберите построить папка.
Радоваться, веселиться.

Структура

Все код разработки вашего расширения должен быть размещен в SRC папка, в том числе расширение манифеста.

Котельная уже готова к всплывающему окну, страницы параметров и страницы фона. Вы можете легко настроить …

XPL/CRX-Hotreload

Хром расширение горячего перезагрузчика

Часы для изменений файлов в каталоге вашего расширения. Когда изменение обнаружено, он перезагружает расширение и обновляет активную вкладку (для повторного запуска обновленных сценариев).

Вот Сообщение в блоге, объясняющее это (Благодаря Kingofnothing для перевода).

Функции

Работает путем проверки временных меток файлов
Поддерживает вложенные каталоги
Автоматически отключает себя в производстве
И это просто 50 строк кода Действительно

Как пользоваться

Падение Hot-Reload.js к каталогу вашего расширения.
Поместите следующее в свой Mainesest.json файл:

    "background": { "scripts": ["hot-reload.js"] }

Кроме того, вы можете просто клонировать этот репозиторий и использовать его в качестве бойной для вашего расширения.

Установка из НПМ

Это также доступно как модуль NPM:

npm install crx-hotreload

Тогда используйте требуется (или импортировать ) для выполнения скрипта.

Мы использовали реагирование, но они должны работать на любую другую государственную библиотеку управления.

5. Совместимость браузера

Проблема с совместимостью браузера не хорошо решена с расширениями. Хотя мы еще не выкопали его, есть много потенциалов в Web-Ext Отказ

6. Команды хоста

Наш агент JavaScript получает некоторые из его метаданных с хозяин команды. Но вы работаете в расширении браузера, так что это не вариант.

Некоторые вопросы тогда возникают:

Откуда получить учетные данные? Следы, отправленные на бэкэнду, нуждаются в конечной точке API и ключ API.
Как бы я рассчитывал NTP Смещение в моей машине, необходимой для точных измерений Timestamm в просмотре трассировки? Говоря о распределенных следах, разрешении и точности в порядке микросекунды и даже наносекунды важно, так как следы часто генерируются в разных машинах. Любое небольшое смещение может испортить ваши данные.
В будущем: как я могу получить код этого определенного файла и номера строки, который бросил исключение?

Есть разные способы ответить на эти вопросы. Например, мы можем решить номер 1, войдя на наше расширение в использовании файлов cookie браузера. Это позволит расширению отправить аутентифицированные запросы на нашу бэкэну. Это рискованно, хотя, как требует Samesame = Нет печенья . Номер 2 хитрый, поскольку нет «внешних мировых» решений, — нам нужны права на хост. Номер 3 можно решить так же, как номер 1, но опять же, это рискованно.

Вариант, который отвечает на все 3 вопроса, использует наше приложение нашего приложения через Основные сообщения обмена сообщениями Отказ Нативное приложение уже настроено с помощью конечной точки API по вашему выбору, и он имеет доступ к ключу API, который решает вопрос № 1. Он также может запустить команды хоста, так что решает номер 2 и номер 3. Недостатком является то, что мы пару наше расширение с другим продуктом, но с нашими текущими и будущими требованиями, имея в виду, это похоже на лучшую альтернативу.

Строительные расширения браузера очень полезны. Технические задачи, которые мы столкнулись с этим, действительно думали спровоцировать и и мы уверены, что мы будем продолжать сталкиваться со многими другими. Вы также можете быть уверены, что мы будем продолжать инвестировать и инновации в этом пространстве, так как мы уверены в нашей способности помочь преодолеть разрыв между Dev & Qa с помощью таких инструментов, как область применения для Chrome.

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

Ваше путешествие к лучшему инженению через лучшее тестирование начинается с объема .

Оригинал: «https://dev.to/kickingthetv/a-modern-approach-to-manual-testing-273h»