Настройка нотификаций в браузере
Меня зовут Виталий, и я автотестер в компании Утконос ОНЛАЙН. В предыдущей статье я рассказал, почему мы решили использовать фреймворк для автоматизации тестирования, описал существующие варианты, наш выбор в пользу Cypress и его связку с репортом Allure. В этой части обсудим технические вопросы: как установить фреймворк, прикрутить хуки в slack для автоматизации и использовать «на поток».
Для начала уточню: чтобы уверенно применять Cypress, необходимо владеть азами npm-node package manager, а также знать синтаксис jasmine и иметь общее понимание о JavaScript. В этой статье я грубо обозначу основные шаги для установки среды, написания тестов и настройки отправки отчетов по их исполнению в канал slack.
Настройка нотификаций Gitlab в Slack
Установка Cypress
Простота установки и низкий порог вхождения являются основными причинами выбора фреймворка Cypress. Для начала нам нужно просто создать новый проект в нашей IDE. Выполняем команду npm init для создания среды. Для установки Cypress пишем в консоли npm i Cypress или ‘node_modules/.bin/cypress install’, если используете локальное окружение. Появляется папка cypress, в ней есть еще одна папка integrations — там будут храниться наши тесты. Также создайте файл command.ts для расширения функционала, который часто переиспользуется.
Далее нужно создать новый файл js. Пишем имя, например, add_product_to_cart, в конце имени файла поставим “.spec”. Cypress использует синтаксис jasmine. В строке с describe обычно пишут содержания тест-сьюта, т.е. то, что он выполняет, к примеру 'add product to cart'.
Далее идут спеки теста (шаги), они начинаются с it. В их имени также описывается, что конкретно этот шаг выполняет.
Как мы видим, на скрине используется pageObject-файл, в котором отдельно описываются локаторы и присваивается переменная. Конкретно в этом примере происходит вызов функции goToSosiges() из pageObject’а, под названием cataloguePage.
После установки и создания файлов pageObject’а и теста запускаем в консоли npx cypress open из директории с package.json. Откроется окно запуска тестов Cypress.
При выборе теста и клика вы получите запуск отдельного браузера, в котором можно просматривать ошибки и ход прохождения запросов.
Установка Allure
Allure — это фреймворк для генерирования отчетов на основе ваших тестов. Для начала установим cypress-allure-plugin — он поможет нам интегрировать Allure в наши тесты и выводить информацию из них.
Для этого в папке cypress/support открываем файл index.js и в нем добавляем следующее:
В файл package.json в разделе scripts добавляем скрипты для работы allure и cypress:
Как видно из перечня скриптов, нам необходимо сначала запустить:
npm run prestart — для установки всех наших пакетов,
npm run pretest — для очистки предыдущих результатов теста,
npm run test — для запуска теста и формирования отчета на основе дефектов.
В итоге мы получаем созданный отчет в удобном формате, который доступен в папке reports. Для этого нам необходимо просто открыть файл index в любом браузере.
Настройка нотификаций Gitlab в Slack
Теперь нам необходимо отправлять наши отчеты содержащие информацию о прогоне в slack. Для этого создадим новый проект в slack:
Выбираем имя и канал, в чат которого будут отправляться нотификации:
Далее вы проходите все этапы создания и копируете hook для вставки в GitLab.
В самом же GitLab вы заходите в свой проект, открываете там вкладку Integrations и в ней выбираете Settings->Integrations. Затем Slack Notifications, где проставляете скопированный hook из slack в поле Webhook.
Yaml в GitLab
В проекте в GitLab основное, что у вас отвечает за отработку по пайплайну, — это файл с расширением yaml. Он содержит команды, которые выполняют установку пакетов, запуск скриптов, сохранение результатов тестов и формирование на их основании отчета. В отчете Allure будет описано время прохождения как всего сьюта, так и каждого теста в отдельности, будут скриншот ошибки, видео с возникновением ошибки и код самой ошибки.
Приведу пример куска yaml-файла:
Доступ к отчету мы получаем через Gitlab pages:
variables — переменныеstages — сценарий, который мы воспроизводимrules — правило, по которому воспроизводится сценарийtags —тэг для внутреннего использованияimage —образ, который вам необходим и который будет скачан и использован в вашем скрипте
Если коротко, то в вашем файле должно быть прописано:
в какой последовательности (на что опирается этот блок stage),
какой образ скачать, и на чем должно работать окружение ваших тестов и отчета,
какие скрипты и в какой последовательности будут применены,
если у вас есть отдельный скрипт, в котором описана отдельная логика, то ваш образ должен уметь запускать этот скрипт, скрипт должен лежать отдельным файлом и в скриптах должен быть описан его запуск.
Таким образом весь процесс состоит из следующих этапов:
Генерируется контейнер с окружением.
В контейнере запускаются скрипты.
Создаются директории для результатов тестирования.
Из результатов формируется отчет.
Отчет публикуется в Gitlab pages.
Из Gitlab pages ссылка на отчет хуком отправляется в slack, где он будет доступен по ссылке.
В общих чертах это все этапы по установке и применению Cypress и Allure. Это был не универсальный рецепт, т.к. стэк приложений может меняться, также как и инструменты написания тестов. В конкретном примере тесты были написаны на Cypress и скрипт, формирующий ссылку для slack, тоже на js.
Привет, Хабр. В этой статье я расскажу о HTML Notification API.
Какие возможности предоставляет Notification API
API позволяем отправлять уведомления через браузер. Вы можете задавать иконку для каждого уведомления, группировать уведомления, указывать заголовок и текст уведомления.
Поддержка в браузерах
- Safari 6
- Chrome 27
- Firefox 22
Как это работает
Ваше первое уведомление
Проверка разрешения
Для проверки разрешения я нашел 3 способа:
1. Через значение свойства Notification.permission.
- В google chrome свойство permission не определено( не смотря на документацию — «The static permission attribute must return permission» ).
2. Через попытку получить разрешение на отправку
Недостатки:
Если состояние default, то пользователь увидит вопрос о желании сайта отправлять уведомления. Пока пользователь не выберет что либо, callback функция не сработает и вы не получите статус.
Маленький хинт:
Можно определить состояние default через requestPermission используя задержку в callback.
3. Через отправку уведомления
У каждого уведомления есть события, подробности позже.
Недостатки:
Срабатывает при двух статусах.
Получение разрешения
Notification.requestPermission срабатывает при разрешении default и принимает функцию, которая получает выбранное разрешение как аргумент.
upd: kromxr подсказывает, что запрос разрешения произойдет только после какого-либо события. Например пользователь нажал на кнопку «разрешить системные уведомления».
Отправка уведомления
Вот и дошли до уведомлений:
И результат:
Разбираемся:
«Андрей Чернышёв» — Заголовок уведомления ( обязательный )
Обрезается в разных браузерах и ОС по разному, рекомендую ограничится 15-ю символами.
tag — тег, связывайщий уведомления в цепочку.
Делает уведомления с одинаковыми тегами взаимозаменяемыми.
body — контент уведомления.
Обрезается в разных браузерах и ОС по разному, рекомендую ограничится 20-ю символами.
icon — иконка уведомления.
Не отображается в chrome и safari под OS X.
События уведомлений
Уведомление имеет 4 события:
onclick
Срабатывает при клике на тело уведомления. Не сработает при клике на крестик или кнопку close ( mac os ).
onshow
Срабатывает при показе уведомления.
onerror
Срабатывает, при попытке показать уведомление без разрешения на это ( default, denied ).
onclose
Срабатывает, когда окно закрывается.
Есть проблема в chrome на windows. Событие close не срабатывает при клике на уведомление.
Изменение решения
В любой момент в браузере можно удалить \ изменить решение об уведомлениях.
Chrome: preferences — settings — show advanced settings — privacy — content settings — notifications.
Safari: preferences — notifications.
Firefox: правой кнопкной мыши на странице — информация о странице — разрешения — отображать уведомления.
Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:
Уведомления почты gmail
Эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.
После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом JavaScript.
Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.
Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission() :
После выполнения метода, результат запроса на права будет лежать в переменной permission .
Вот её разные значения с пояснениями:
- default — запрос на получение прав не отправлялся;
- granted — пользователь разрешил показывать уведомления;
- denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
title — заголовок уведомления,
options (опционально) имеет следующие параметры:
- body — тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна — 200 символов);
- dir — направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
- lang — язык уведомления;
- tag — уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
- icon — URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).
Результат выполнения кода выше
Также у notification есть методы-обработчики событий onclick , onshow , onerror , onclose :
Одна функция для всего
Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
Многие пользователи интернета задаются вопросом: «Нотификация в браузере – что это?» Она отображает определенный стиль интернет-серфинга, где запрос о какой-либо транзакции инициируется от центрального сервера. Это контрастирует с обратным направлением данных, где запрос на передачу информации инициируется получателем или клиентом.
Принцип действия
Что было ранее?
Нотификация в браузере – что такое сегодня?
Нотификация в браузере – что это с технической точки зрения?
Альтернативные механизмы
Другой механизм связан с особым типом MIME, который называется многокомпонентной заменой. Впервые он был представлен в 1995 году Netscape, когда браузеры «на лету» изменяли документ всякий раз, когда на сервер поступала новая версия. Он по-прежнему поддерживается в Firefox, Opera, Safari и сегодня, но не доступен в Internet Explorer. Данный механизм может быть применен к HTML-документам, а также для потоковой передачи изображений в приложениях для веб-камеры.
Запоминание данных
После получения ответа клиент часто сразу выдает запрос на другой сервер. Таким образом, обычное время задержки отклика (время между тем, когда информация становится доступной, и следующий запрос клиента), связанное с поступлением запросов, исключается.
XML Socket
Это характерно для многих веб-приложений, в том числе чатов, и, как следствие, обеспечивает высокую эффективность. Так как он не принимает данные на исходящие сокеты, серверу не требуется запрашивать исходящие соединения TCP, и это делает возможным установление десятков тысяч одновременных соединений. Так происходит нотификация в браузере на «Одноклассниках» в некоторых сервисах сайта.
Доступные услуги нотификации
Нотификация - это один из современных способов обезопасить вашу страницу в социальных сетях. Например, в "Одноклассниках". Нотификация - что это? Это уведомления, которые будут приходить на привязанный к странице в социальной сети мобильный номер.
Нотификация в браузере в "Одноклассниках" как способ защиты персональных данных
В первую очередь подключенная смс-нотификация позволяет восстановить утерянные логин или пароль от вашей страницы. Также в случае если кто-то попытается взломать вашу личную страницу, на номер, привязанный к ней, придет смс-оповещение со встроенной ссылкой, пройдя по которой, вы сможете восстановить свои данные и не допустить взлома и похищения персональной информации. Таким образом нотификации можно присвоить защитную функцию вашей страницы в социальных сетях.
Способ быть в курсе всех новостей
А вы знали, что нотификация в "Одноклассниках" - это и достаточно удобное средство, позволяющее быть в курсе новых событий в жизни ваших друзей, быть осведомленным о происходящем на вашей странице в ваше же отсутствие?
Особенности нотификации в "Одноклассниках"
Помимо этого, вы сможете установить оповещения, которые будут приходить в случае приглашения вас в группы или игровые приложения, получения новых подарков от друзей или новых мероприятий, организуемых в рамках групп, в которых вы состоите. Также у вас есть возможность получать напоминания о днях рождения друзей, что, безусловно, является полезной функцией, поскольку порой ввиду занятости достаточно сложно удержать в голове даже какую-то простую информацию, а обидеть близких и родных, забыв о важном дне, никак не хочется. Таким образом, нотификация действительно играет довольно большую роль как в функционировании вашей страницы, так и в реальной жизни.
Минусы нотификации в социальных сетях
Несмотря на очевидные положительные стороны подтверждения нотификации и привязки своего мобильного номера к странице в интернете, есть и отрицательные стороны данного процесса. Для честного обзора функции нотификации мы бы хотели осветить один момент, который может повлечь неприятные последствия. То, чего надо бояться больше всего - это потеря или кража вашего мобильного телефона, в который встроена сим-карта с номером, привязанным к странице. Имея ваш телефон, злоумышленники смогут легко получить доступ к вашим социальным сетям, а изменив логин и пароль, значительно усложнят вам в последующем процесс восстановления страницы. Примерно такой же сценарий будет и в случае, если у вас взломают электронную почту, к которой привязана страница.
Как отключить нотификацию в "Одноклассниках": самый простой способ
Если предыдущий абзац статьи вас сильно обеспокоил, то спешим вам сообщить один важный момент. Знайте, что нотификация в "Одноклассниках" - это дополнительная возможность, от которой можно отказаться в любой момент. Зайдя на сайте в раздел "Еще", в появившемся списке выберете "Настройки", а далее перейдите в меню слева в "Уведомления". С помощью этого способа вы всегда сможете убрать галочки под всеми оповещениями.
В данной статье мы рассмотрели как плюсы, так и минусы функции нотификации в "Одноклассниках": что это, как это работает и зачем это нужно. У любого явления есть как положительные, так и отрицательные стороны. Удобство нотификации заключается в регулярном информировании о происходящем в социальных сетях. Опасения утери личных данных с персональной страницы тоже небезосновательны, но стоит учитывать, что такое происходит крайне редко, если работать в интернете аккуратно и не переходить по подозрительным ссылкам, которые могут содержать вирусы. Поэтому рекомендуем вам внимательно изучить статью и только после этого принимать решение, стоит ли подключать данную услугу или обходиться без нее.
Читайте также: