предисловие
Когда я был в поисковой команде Baidu, я сделал небольшой инструмент, который мог автоматизировать некоторые повседневные задачи и действительно решить некоторые проблемы. Первомай, давайте делиться чем-то интересным. Надеюсь дать вам немного вдохновения.
начало истории
Не так давно я присоединился к поисковой команде Baidu и участвовал в каком-то бизнесе по поиску компьютеров. Поисковый бизнес за столько лет накопил большой технический долг, и главная проблема, влияющая на эффективность, — это процесс разработки. Например, домашняя страница часто должна переключаться между состоянием входа в систему и состоянием без входа, чтобы увидеть эффект.Каждый раз, когда вы переключаетесь, вам нужно вручную вводить имя пользователя и пароль, а поскольку некоторые ресурсы http будут включать междоменные и потерпит неудачу, вам нужно запросить его отдельно. Например, каждый раз, выходя в интернет, приходится несколько раз проходить чек-лист, что громоздко и отнимает много времени, поэтому почти никто серьезно не будет проходить чек-лист снова и снова, и так далее одни проблемы. И поскольку мы также отправляем код непосредственно на сервер, чтобы увидеть эффект во время разработки, мы часто входим в трамплин и переключаемся между разными машинами, и нам нужно помнить имена некоторых машин и пароли, что также требует очень много времени. Хотя я знаком с процессом и архитектурой, я думал о том, как решить эти болевые точки. Было прохождение, UE и PM сказали, что вход в каждый проход был хлопотным. Услышав это и обнаружив, что это распространенная проблема, я чувствую, что это можно официально начать.
первоначальная цель
Первоначальная цель состоит в том, чтобы войти в систему и выйти из нее одним щелчком мыши, запустить контрольный список одним щелчком мыши и войти в трамплин и переключить среду одним щелчком Когда дело доходит до автоматизации браузера, естественно, я думаю о puppeteer, библиотеке для автоматизированного тестирования переднего плана. Трамплин для входа в систему и машина для переключения входа в систему не находятся в браузере и должны включать автоматизацию системы (события мыши и клавиатуры и т. д.), и, наконец, выбрать robotjs. Эти две библиотеки могут быть запущены только в среде узла, и компьютеры UE и PM не будут устанавливать узел.С большим количеством функций будет лучше иметь графический интерфейс, поэтому я думаю об электронном (предоставлении среды узла и графического интерфейса ).
Кратко представим эти три технологии:
1. Puppeteer
Puppeteer — это библиотека Node, которая предоставляет некоторые высокоуровневые API для управления Chromium или Chrome через протокол DevTools.
Он может делать многое, например:
- Создание скриншотов и PDF-файлов страниц;
- Возьмите SPA и создайте предварительно обработанный контент (также известный как «SSR»);
- сбор контента с веб-сайтов;
- Автоматическая отправка форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. д.;
- Создайте современную автоматизированную тестовую среду. Используйте новейшие функции JavaScript и браузера для запуска тестов непосредственно в последней версии Chrome;
- Захватите трассировку временной шкалы вашего веб-сайта, чтобы помочь диагностировать проблемы с производительностью;
Most things that you can do manually in the browser can be done using Puppeteer!
он предоставляет эти API
- Puppeteer: связывайтесь с браузером через протокол DevTools, чтобы создать экземпляр браузера.
- Браузер: экземпляр браузера, у вас может быть несколько BrowserContext.
- BrowserContext: определяет сеанс просмотра, который может иметь несколько страниц.
- Страница: хотя бы один кадр: основной кадр. Могут быть и другие фреймы, созданные с помощью iframes или тегов фреймов.
- Фрейм: по крайней мере один контекст выполнения — контекст выполнения по умолчанию — выполняет JavaScript фрейма. Кадры могут иметь другие контексты выполнения, связанные с расширением.
- Worker: имеет единый контекст выполнения для удобного взаимодействия с WebWorkers.
2. Robotjs
Robotjs — первая библиотека nodejs для автоматизации рабочего стола. Он автоматизирует чтение с мыши, клавиатуры и экрана и обеспечивает кроссплатформенную поддержку для Mac, Windows, Linux.
3. Electron
Electron позволяет создавать настольные приложения, используя чистый JavaScript, вызывая богатые нативные (операционные системы) API. Вы можете думать об этом как о варианте Node.js, который фокусируется на настольных приложениях, а не на стороне веб-сервера.
Процесс Electron делится на основной процесс и процесс рендеринга.Процесс, в котором Electron запускает основной скрипт package.json, называется основным процессом. Сценарий, который запускается в основном процессе, представляет пользовательский интерфейс, создавая веб-страницы. Приложение Electron всегда имеет один и только один основной процесс, и каждая веб-страница в Electron выполняется в своем процессе, называемом процессом рендеринга. Поэтому при создании электронных приложений для связи процессов часто используется ipc, а многие операции можно выполнять только в основном процессе.
После этого для отображения интерфейса можно использовать любую компонентную схему.Изначально я хотел использовать san (интерфейсный фреймворк Baidu), но у san нет каркаса электрона.Учитывая эффективность, для создания временно используется электрон-vue проэкт.
начальный пользователь
Первоначальная версия пошагового инструмента, интерфейс выглядит следующим образом:
Введите URL-адрес и нажмите «Войти», чтобы запустить браузер через puppeteer и автоматически перейти на страницу входа, ввести имя пользователя и пароль, а затем нажать «Войти», чтобы перейти к введенному URL-адресу. Это только для ПК.Если мобильный терминал запущен, просто установите ua.
browser = await puppeteer.launch({
executablePath: getConfig('chromePath'),
headless: false,
defaultViewport: {
width: 0,
height: 0
},
args: [
'--allow-running-insecure-content',
'--disable-web-security',
'--auto-open-devtools-for-tabs'
]
})
При запуске браузера черезheadlessПри значении false puppeteer поддерживает запуск браузера без интерфейса, в основном для автоматизированного тестирования, но здесь нам нужен интерфейс.
затем пройтиexecutablePathУкажите локальный путь запуска хрома, который можно изменить в настройках (как правило, путь хрома фиксирован), чтобы для запуска использовался локальный хром, и его не нужно было упаковывать вместе с хромом.
defaultViewportУстановите ширину: 0 и высоту: 0, чтобы содержимое автоматически соответствовало размеру окна.
--allow-running-insecure-contentа также--disable-web-securityПолитика одного и того же источника может быть запрещена, чтобы веб-сайт https не сообщал об ошибке при загрузке ресурсов HTTP с перекрестным происхождением.
--auto-open-devtools-for-tabsВы можете открыть новую вкладку, чтобы автоматически открывать инструменты разработчика (это можно добавить в настройки позже, чтобы пользователи могли установить их самостоятельно).
После этого я сделал функцию выбора цвета экрана.Учитывая, что она может использоваться при ходьбе уе, реализация заключается в том, чтобы отслеживать системные события мыши через ox-mouse, а затем использовать robotjs для получения цвета положения мыши, а затем отправить его в colorpicker.отображается окно.
import mouseEvent from 'osx-mouse'
import robot from 'robotjs'
const mouseTrack = mouseEvent()
mouseTrack.on('move', (x, y) => {
let color = '#' + robot.getPixelColor(parseInt(x), parseInt(y))
const colorPickerWin = BrowserWindow.getAllWindows().filter(item => item.name === 'colorPickerWin')[0]
if (colorPickerWin) {
colorPickerWin.webContents.send('color', color)
}
})
Первые два пользователя (PM и UE) дали единогласные подтверждения, что меня очень порадовало.
Расширьте границы
Из-за успешной практики первой сцены будет больше энтузиазма делать это позже. Первоначальная цель была больше для разработчиков, поэтому версия для разработчиков была сделана как независимый инструмент. Есть много сценариев, где это может быть применено.
Первое, что нужно сделать, это автоматически войти в трамплин и автоматически переключить среду.Реальный процесс заключается в том, чтобы открыть терминал, ввести команду ssh, чтобы связать трамплин, затем ввести пароль и аутентификацию мобильного телефона.Эта часть мобильного аутентификация по телефону в настоящее время не автоматизирована, и лучше всего не автоматизировать, автоматизировать все, что было раньше. Конечным эффектом является то, что вы можете войти в трамплин одним щелчком мыши, и вы можете войти в систему с аутентификацией жестами Ruliu. Реализация по-прежнему через robotjs, сначала введите команду + пробел, чтобы открыть прожектор, затем введите terminal.app, а затем введите команду и пароль. Процесс довольно глупый.
async function spolightOpen(appName) {
robot.keyTap('space', ['command'])
await delayPromise(500)
robot.keyTap('delete')
robot.typeString(appName)
await delayPromise(2000)
robot.keyTap('enter')
await delayPromise(1000)
}
async function sshLogin(params) {
await spolightOpen('terminal.app')
robot.typeString('ssh xxx@baiduxxx.com')
robot.keyTap('enter')
await delayPromise(1000)
robot.typeString('xxxxxx')
robot.keyTap('enter')
}
Автоматический запуск контрольного списка — это категория автоматизированного тестирования, и puppeteer отлично справляется с этим: просто пропишите шаги операции в скрипты, а затем проверьте эффект в некоторых состояниях.
После выполнения этих функций я подумаю об автоматическом создании карточки icafe (внутренняя платформа управления проектами Baidu) (взять содержимое mrd (документа с описанием требований) и автоматически вставить его, автоматически ввести некоторую информацию и создать карточку, а также поместить код, связанный с cr Скопируйте его), автоматически создавать тестовые заказы, автоматически создавать онлайн-заказы, автоматически отправлять запланированные электронные письма, автоматически отправлять еженедельные отчеты и т. д.
Многие вещи, которые обычно выполняются вручную, можно делать автоматически, как в браузере, так и на системном уровне.
Я медленно думаю, что функции каждого из них связаны с базой кода.Должен ли я управлять базой кода, а затем интегрировать цепочку инструментов вокруг цикла разработки базы кода?
Средства разработки в основном формируются
На данном этапе мое определение инструментов разработки состоит в том, чтобы управлять кодовой базой (например, на домашней странице есть много модулей, а некоторыми модулями можно управлять вместе по классификации) и предоставлять ряд инструментов повышения эффективности вокруг разработки. процесс кодовой базы. Набор инструментов можно расширить с помощью плагинов.
Интерфейс, вероятно, разработан так
Каждую базу кода можно создать, введя локальный путь и путь icode (внутренняя платформа размещения кода Baidu), а также соответствующую информацию о разработке и pm, чтобы локальную базу кода можно было открыть с помощью ide одним щелчком мыши, и вы можете увидеть ее в детали Информация о соответствующем человеке, и щелчок по имени может открыть диалоговое окно (на основе robotjs), такое как соответствующий человек в потоке, одним щелчком мыши.
Затем он просканирует npm-скрипты в package.json под кодовой базой, которую можно выполнить на интерфейсе, или вы можете выбрать ее выполнение в терминале системы или терминале ide.
Когда вы выбираете процесс разработки, вы увидите вкладки каждого этапа.Под каждой вкладкой есть инструменты, которые можно использовать на этом этапе, такие как трамплин для входа в один клик и переключение среды во время разработки, автоматическое планирование электронных писем в расписании. этап, и автоматическое создание карточки icafe, автоматический вход и выход на этапе самопроверки, автоматическое создание тестовых заказов на этапе онлайн и т.д., реализованы так же, то есть для имитации действий пользователя, и замены людей выполнить некоторую работу посредством автоматизации браузера и автоматизации системы.
Поскольку вход в процесс разработки скрыт глубоко, но очень часто используется, левая сторона упоминается отдельно. Кроме того, некоторые другие инструменты также широко используются и могут быть помещены в набор инструментов, например, визуальное удаление локальных модулей node_modules, выбор цвета экрана, линейка экрана и т. д.
Существует два метода запуска инструментов на панели инструментов: запуск одним щелчком мыши и запуск задачи по времени. Например, доступные комнаты для собраний автоматически отображаются каждые две недели, после чего электронное письмо готово. Просто подтвердите информацию и нажмите «Отправить». для автоматического бронирования конференц-зала некоторые инструменты не требуют функции синхронизации. Реализация функции синхронизации осуществляется через node-schedule, и ее стиль API выглядит следующим образом:
const schedule = require('node-schedule');
const scheduleCronstyle = ()=>{
//每分钟的第30秒定时执行一次:
schedule.scheduleJob('30 * * * * *',()=>{
console.log('scheduleCronstyle:' + new Date());
});
}
scheduleCronstyle();
Укажите временной интервал с помощью * * * * * *
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ |
│ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 - 12)
│ │ │ └────────── day of month (1 - 31)
│ │ └─────────────── hour (0 - 23)
│ └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, OPTIONAL)
Идея всего инструмента заключается в том, что некоторые инструменты автоматизации вокруг процесса разработки базы кода.Основываясь на puppeteer и robotjs, инструменты, необходимые в разных сценариях, разные, поэтому функция плагина необходима.Если плагин -in достаточно богат, мы можем использовать его во время разработки.Выберите плагин, подходящий для вашей собственной сцены, для установки, и некоторые инструменты сцены будут добавлены автоматически. Конечно, этого еще не произошло.
В настройках можно установить различную информацию об учетной записи, а также включить и выключить некоторые функции.
Экран блокировки должен использовать экран блокировки системы, просто нажмите на него перед тем, как пойти поесть в полдень.
На момент разработки прошло полмесяца с момента первоначальной идеи.Хотя разработка еще не завершена, определение этого инструмента имеет относительно четкое понимание.
рассмотрение
Благотворительность и вишенка на торте
После того, как маленький инструмент станет относительно большим, будут некоторые сомнения в необходимости этого инструмента, но в конце концов я все же думаю, что это имеет смысл. Прежде всего, это решило мои болевые точки в сценарии ПК, такие как автоматический вход и выход из системы, автоматический контрольный список запуска, вход в трамплин одним щелчком мыши и среда вырезания. Некоторые функции сзади лучше, а если нет, то они не окажут большого влияния, что является функцией «вишенки на торте».
Однако после того, как механизм подключаемого модуля будет предоставлен, можно будет сделать больше расширений для устранения болевых точек различных сценариев, а также можно будет интегрировать больше функций «послать уголь в снег». Таким образом, обеспечение управления кодовой базой и разделение процесса разработки, а также предоставление механизма подключаемых модулей сделают этот инструмент более творческим.
В тот день группа пошутила, что вам может понадобиться 20 причин для этого инструмента.На самом деле это не было достигнуто.Сейчас есть только 3 или 4 причины для использования этого инструмента, но при постоянном совершенствовании он может стать очень важным помощником в разработки А что насчет инструментов.
Некоторые ямки в процессе
Должен сказать, что ямок в электроне действительно много, я просто перечислю несколько важных.
-
В среде узла, предоставляемой электроном, версия узла и локальная версия узла должны быть разделены.Если сообщаемая версия несовместима во время выполнения, бесполезно обновлять локальную версию узла.Вам необходимо обновить электронную версию.Взаимосвязь между версию Electon и версию встроенного узла можно проверить на официальном сайте. Поскольку пакет зависит от электронной версии, бесполезно использовать npmrebuildxxx для некоторых бинарных пакетов, используйтеelectron-rebuildxxx.
-
Electron не предоставляет никаких сочетаний клавиш по умолчанию, поэтому после упаковки вы обнаружите, что команда + v в поле ввода не работает, вам нужно установить ее самостоятельно. Однако тот факт, что сочетания клавиш других приложений не могут быть активированы, наносит сокрушительный удар по реализованной ранее функции системной автоматизации, поскольку при реализации системной автоматизации часто используются сочетания клавиш других приложений, но оказывается, что они не поддерживаются после упаковки! Поломав голову, я придумал решение.Макинтош приложение не поддерживает горячие клавиши для запуска других систем, и ни родительский, ни дочерний процессы не будут работать.Тогда два независимых процесса скоро будут в порядке, поэтому настраивается отдельный сервер Запускайте различные функции автоматизации, запрашивая параметры. Но есть дополнительная зависимость от локального сервера вне приложения, и я не разобрался, как приложение должно распространяться и управляться. Но, по крайней мере, это работает.
наконец
Первоначально это был просто инструмент для автоматического входа в систему, но я обнаружил, что могу делать больше.Во многих сценариях необходимы некоторые автоматизированные инструменты. Он может автоматизировать некоторые из трудоемких, но ненужных действий, которые мы делаем вручную в нашей работе, освобождая наше время для более важных дел. Механизм подключаемых модулей делает его более творческим, и, возможно, вокруг этого инструмента можно сформировать экологию.