Transcription
Привет, ребята, добро пожаловать обратно. И сегодня в этом видео я расскажу о том, как мы можем преобразовать существующий тест Selenium в код теста Playwright с помощью искусственного интеллекта и чат-режимов GitHub. Эта тема возникла у меня как вопрос на моей конференции, которая проходила в Окленде в начале этой недели, где один из юристов задал мне вопрос: у нас есть код теста Selenium, и мы хотим преобразовать его в код Playwright. Как мы можем это сделать? Есть ли способ сделать это, или есть ли какие-либо ИИ-агенты, которые могут это сделать? Ну, это побудило меня создать это конкретное видео, потому что у нас есть возможность выполнить эту операцию без особых усилий, и я покажу вам, как мы можем это сделать. Прежде всего, давайте сначала разберемся, что именно представляет собой этот конкретный ИИ-агент чат-режимов. Ну, чат-режимы — это возможность создавать свои собственные пользовательские агенты с помощью GitHub Copilot, где эти пользовательские чат-режимы позволяют вам настраивать ИИ для адаптации к различным ролям, ориентированным на конкретные роли и задачи разработки. Например, здесь мы будем преобразовывать существующий тест Selenium в тест Playwright. Таким образом, мы можем создать чат-режим с агентом, специфичным для этой конкретной операции. И аналогично вы можете создавать режимы для обзора безопасности, планирования, устранения неполадок или даже создания тестов, планирования стресс-тестов и всего остального. Если вы когда-либо работали с агентом Playwright, вы, возможно, знаете, что агенты тестов Playwright фактически построены на той же идее. У них есть агент-планировщик, агент-генератор, а также агент-устранитель неполадок. Это не что иное, как набор подсказок, написанных с использованием этих конкретных возможностей чат-режимов, и я уже говорил о том, как написаны эти чат-режимы и как они фактически расширяют возможности использования ИИ для генерации тестов, а также для генерации планов и всего прочего. Это именно та идея, которую мы преследуем сегодня. Мы сделаем это. И если вы просто зайдете в чат-режим в VS Code, если вы просто зайдете и поищете его, вы увидите эту страницу. И вы можете видеть, что вы можете создавать чат-режимы, подобные этому, в файле markdown. Это все, что вам действительно нужно сделать. И как только вы это сделаете, вы увидите, что все появится. И поскольку этот чат-режим похож на обычный английский текст, его очень легко создать, исходя из ваших требований. И я быстро покажу вам, как я создал этот конкретный чат-режим для преобразования кода Selenium в код Playwright. Это требует нескольких шагов. Как вы можете видеть здесь, вы скажете этому конкретному агенту чат-режима, что вам нужно установить зависимости для Playwright. Правильно. Это первое, что нам нужно сделать, потому что в существующем коде тестов Selenium может не быть зависимостей. Поэтому он проверит, есть ли зависимости для Playwright. Если их нет, он установит их, а затем проанализирует структуру проекта Selenium, прежде чем вносить какие-либо изменения в код. Так что он сделает и это, а затем преобразует существующий код модели страницы Selenium в код модели страницы Playwright в отдельной папке для этого. Вот как я это создал. И аналогично, он преобразует тесты, которые фактически используют модель страницы, которую вы предоставите ему в качестве контекста при преобразовании. Так что это будет сделано как побочный продукт, что тоже удивительно. Это то, что вы можете сделать. А затем он документирует все изменения, которые произошли в результате преобразования, в файле readme или, возможно, в файле migration.md. Итак, все это ключевые компоненты ИИ-агентов чат-режимов, которые мы будем создавать. Помимо этого, вам также нужно сообщить ИИ-агенту, как вы собираетесь вносить все эти изменения, и предоставить рекомендации. Так что вы скажете, что до того, как произойдет преобразование, вы увидите этот метод, как вы видите здесь в Selenium, затем в Playwright вам нужно преобразовать его в loginAsync, потому что в Playwright все асинхронно, поэтому вы будете использовать ключевое слово await и асинхронную задачу, и аналогично вы создадите сопоставление взаимодействия элементов, где вы скажете, что именно так должно происходить взаимодействие элементов, и это то, что вам нужно использовать для Selenium, и это именно то, что применимо для Playwright, поэтому вы будете выполнять сопоставление для взаимодействия элементов, например, click для Selenium будет await locator.clickAsync. Аналогично, send keys of text будет fillAsync text. Аналогично, clear будет fillAsync. Аналогично, text будет text contentAsync или inner textAsync, что-то в этом роде. Так что вы будете выполнять все сопоставления. Это очень, очень высокоуровневое сопоставление, которое я сделал. Но вы можете продолжать добавлять этот конкретный агент таким образом, чтобы вы могли увеличить охват, насколько хотите. Для этой демонстрации я сделал ее максимально простой. что вы можете продолжать увеличивать сложность этого конкретного режима агента, чтобы охватить все, что удивительно, и аналогично IWebDriver в Selenium теперь перемещен в IPage, потому что именно так вы будете передавать его в конструктор, потому что именно это вам действительно нужно при работе с кодом модели страницы, и, конечно же, как вы будете писать тесты, также определено здесь. Так что, как только вы определите все это, вы готовы приступить к созданию собственного пользовательского агента для преобразования кода Selenium в код Playwright. И я покажу вам, как все это будет работать в этом конкретном видео. И снова, если вы уже знакомы с этим конкретным кодом, это очень, очень просто. Весь этот код будет делать то, что он начнет устанавливать некоторые файлы. Я быстро покажу вам, как мы можем это сделать. Итак, первое, что я сделаю, это перейду к этому конкретному репозиторию здесь, Selenium CI/CD demo. Я думаю, я работал над этим репозиторием давно, год назад. Так что я собираюсь использовать его и посмотрю, как мы можем это сделать. Итак, давайте перейдем к папке, подобной этой. И я сделаю git clone и клонирую этот конкретный репозиторий, Selenium CICD demo. Вы также можете поискать в репозитории GitHub user automation, вы найдете точно такой же проект. Так что это не проблема вообще. И как только я клонирую его, он будет у вас. А затем я перейду к Selenium CI CD demo. И я открою Visual Studio Code здесь. Это откроет для меня Visual Studio Code. И вы можете видеть, что это очень, очень простой код Selenium, который содержит тесты, написанные либо в NUnit, также с Selenium Grid, также с R1 testing здесь. И также он содержит обычные тесты, как вы их пишете, используя xunit и все такое, и вы также можете видеть, что у нас есть некоторые модели здесь, как они используются, а также есть некоторые коды модели страницы для страницы входа, как вы можете видеть здесь. Я знаю, что это не совсем страница, она очень простая, но когда вы столкнетесь с чем-то более сложным, вы увидите, как это достигается. Это также то, что вы можете легко достичь, и вы также можете видеть, что в настоящее время мы используем эту версию инструмента .NET для основных операций конструктора и всего прочего. Так что эти вещи будут автоматически преобразованы для вас из этой конкретной подсказки чата. Хорошо. Теперь вы можете видеть, что у нас уже есть рабочий процесс GitHub для выполнения конвейера CI/CD. И угадайте, что я собираюсь сделать? Я просто открою терминал Windows здесь. Просто подождите, пока вы увидите этот путь, папку GitHub. Причина, по которой я хотел настоять, заключается в том, что я собираюсь перейти к этому элементу Playwright здесь и просто установлю этот конкретный агент здесь с помощью VS Code. Я знаю, что я не буду использовать этот конкретный режим агента вообще в этой демонстрации, но причина, по которой я хотел показать вам, заключается в том, что именно так вы можете создавать чат-режимы. Итак, как только я нажму Enter, вы увидите, что в GitHub появилась новая папка под названием chat modes. Внутри этой папки chat modes у вас есть все эти агенты. Видите, это именно то, что нам нужно создать, ребята. Это не такая уж большая проблема, честно говоря. Мы можем создать свой собственный чат-режим. И если вы просто зайдете в чат-режим, вы увидите, что у них есть описание. У них есть инструменты, которые используются этим конкретным чат-режимом или агентом. А затем детали здесь. Смотрите, у вас есть все детали, такие как подсказка, которая была написана. Это очень, очень простой подсказка, честно говоря. Но как только мы начнем писать, это будет очень, очень сложно, потому что я хочу, чтобы все было максимально объяснимым и охватывало как можно больше. Так что мы преобразуем весь тест Selenium в тест Playwright. Так что нам нужно много всего, верно? Это не так просто, как кажется. Так что я собираюсь удалить ненужные чат-режимы, которые мне даже не нужны. Я даже удалю этого парня. Мне даже не нужен этот парень. Смотрите, чтобы создать чат-режим, вам просто нужно создать файл, подобный этому, скажем, selenium to playwright chat moded, что-то вроде этого, верно? Это все, что вам нужно сделать. Как только вы это сделаете, этот файл будет доступен вам в этом конкретном агенте GitHub Copilot здесь. Смотрите, selenium to playwright. Я просто добавил этот файл. Как только я добавлю его, вы увидите это здесь. Вот и все. И теперь, когда у нас есть это, я создам чат-режим, который я только что описывал, который вот этот. Я знаю, что здесь 598 строк. Это много, но он выполняет много различных операций. Я также дам, вероятно, значок, который добавила команда Playwright, что-то вроде этого. Смотрите, это значок, который они используют. Так что я тоже могу добавить эту вещь. Теперь у моего агента будет агент Selenium to Playwright. Удивительно. Так что я могу выбрать его и начать работать с ним. Но прежде чем я начну, позвольте мне показать вам подсказку, которую я написал здесь, чтобы выполнить всю эту операцию преобразования. Так что я говорю здесь: используйте этого агента для преобразования кода модели страницы Selenium в код модели страницы Playwright на C#.NET. Так что я очень сильно ограничиваю этот конкретный код только для C#.NET, а не для Java или JavaScript, потому что чем сложнее вы делаете этот конкретный чат-режим, тем больше галлюцинаций он начнет вызывать у вашей большой языковой модели. Так что имейте его, вероятно, в разных файлах, например, для C#, для Java, для JavaScript, TypeScript, что-то в этом роде, чтобы вы не оказались с множеством различных комбинаций вещей в одном файле. И это также очень легко поддерживать, вы знаете, модульность и поддерживаемость, которые вы можете сделать. И здесь я говорю, что агент поддерживает структуру, функциональность и логику тестов, модернизируя асинхронный шаблон Playwright и встроенный механизм ожидания. И это инструмент, который мне нужен. И эти инструменты находятся в моих системах инструментов здесь. Смотрите, как только я определю инструменты здесь, будут выбраны только эти инструменты. Как вы можете видеть здесь, это только выбранные инструменты. Не все инструменты будут выбраны, потому что как только вы выберете агент для этого, я просто выберу агент здесь. Вы видите, что количество выбранных инструментов составляет 260 инструментов. Нам не нужны все эти инструменты. Нам нужно ограничить использование инструментов, и поэтому я буду использовать только эти инструменты. Больше никаких инструментов. Я даже не использую инструмент Playwright, как вы можете видеть здесь. Я также говорю, что вы конвертер тестов C#.NET, эксперт по миграции кода модели страницы на основе Selenium в Playwright, и ваша специализация — преобразование устаревшего кода тестов Selenium в современную надежную реализацию Playwright, сохраняя при этом бизнес-логику и улучшая читаемость с помощью встроенных функций Playwright, и вот преобразование: как я вам говорил, проверьте и установите зависимости Playwright, организуйте структуру проекта так, как вы хотите, и проанализируйте структуры кода Selenium, преобразуйте страницы в их соответствующие тесты, преобразуйте класс тестов и унаследуйте страницу, просто nunit или эквивалент для этого, и аналогично сгенерируйте полный преобразованный код и документируйте ключевые изменения, и это пакет NuGet, который вам нужно установить. Вы можете изменить версию здесь. Какая последняя версия? Вам, вероятно, стоит использовать и ее, а затем обнаружить существующие фреймворки тестов после установки. Вам нужно сделать все это. Смотрите, измените эту конкретную вещь драйвера из кода модели страницы, а также как вы будете преобразовывать локаторы и как вы будете работать со всем этим. И это структура кода, как вы будете делать это с Selenium, и после того, как вы выполните преобразование с Playwright, код должен выглядеть так. Так что я напишу весь код здесь. Это код теста для Selenium. Так что я преобразую код модели страницы, и это код теста здесь. Я также определяю структуру проекта. Так что я ожидаю, что агент создаст мне страницы Playwright, а также тесты для меня там, не в существующих страницах. Я не буду нарушать тесты Selenium. У меня будет отдельная папка под названием playrights pages, чтобы там были только эти страницы, а существующая страница входа останется там. Она не будет нарушена для этого. Вот как я это написал. И это формат вывода, который вам нужно создать. И также окончательная структура должна выглядеть примерно так. Смотрите, это как бы преобразовано, и тест будет обновлен и преобразован для вас здесь. Довольно круто. Я знаю, что здесь много всего, чтобы переварить, но это позволит вам преобразовать тесты Selenium в тесты Playwright всего за несколько секунд, и я покажу вам, как это будет выглядеть. Так что я собираюсь выбрать этот конкретный агент отсюда, а теперь я выберу страницу, которую я хочу преобразовать, и хорошо то, что у меня только одна страница. Так что я выберу эту конкретную страницу здесь, и я хочу выполнить полное преобразование. Так что я скажу convert convert the page to playwright playwright. Вот и все. Это единственное, что мне нужно дать, потому что агент знает, что делать с этим конкретным кодом модели страницы, а также с тестом и всем остальным. Смотрите, теперь я нажму Enter. И как только я это сделаю, потому что чат-режим уже содержит все инструкции для работы с этой конкретной страницей. Методы расширения тестов или все, что он знает, как с этим работать. Так что вы видите, что теперь он использует ссылку на файл tool.instruction.mmd, а затем он изменит структуру тестового проекта, это первое, что мне нужно было сделать, а затем он изменит все здесь. К сожалению, я выбрал модель как авто, но если бы я выбрал clouds 4.5, это всегда было бы лучше. Но я просто забыл это сделать. Но посмотрим, потому что в зависимости от нагрузки Visual Studio Code будет редактировать выбранную модель. Но давайте просто подождем, пока это произойдет. Посмотрите, он много думает здесь. И он выполняет преобразования. Давайте просто подождем, пока произойдет преобразование. Так что он готовится к изменениям патчей и всему прочему. Так что он читает весь тестовый код, прежде чем начать работать над ним, а затем он начнет его преобразовывать. Так что я просто подожду, пока это преобразование произойдет, и посмотрим, что действительно произойдет в итоге. Хорошо, похоже, он полностью завершил миграцию всего за несколько секунд. И если я зайду на страницу входа здесь, вы можете видеть, что она использует страницу входа с iPage здесь. И вы также можете видеть, что она передает ipage что-то вроде этого. И это конструктор, который используется для передачи вам iPage здесь. И посмотрите, как произошло преобразование для employee details. Он фактически использует локатор с ссылкой, а имя — employee details. Ссылка — manage user. Ссылка — log off, что, честно говоря, идеально, именно так бы я написал код, если бы писал его. И посмотрите, эти методы теперь все являются асинхронными методами, что довольно удивительно. И вы также можете видеть, как он пишет весь код, используя task везде, что, честно говоря, потрясающе. А затем в коде теста вы можете видеть, что он также изменил код теста на асинхронный, и он просто вызывает его с асинхронной операцией, и теперь все написано здесь. Посмотрите на категорию, он просто ставит playright dt, что удивительно, и да, посмотрите, все преобразовано, ребята. Теперь у нас все готово. Теперь я хочу изучить это, запустив этот конкретный код и посмотреть, действительно ли этот код будет работать или нет. Так что позвольте мне просто открыть этот конкретный проект в IDE writer или где-нибудь еще, чтобы я мог выполнить этот конкретный код. Так что я просто открою это в finder, это вот это. И я перейду к net senium, просто вот это, и позвольте мне открыть этот конкретный проект здесь. Он просто загружается, и да, это все хорошо для нас. Здесь я собираюсь собрать этот конкретный проект, чтобы увидеть, будет ли сгенерированный код действительно работать для нас или нет. Посмотрите. Сборка успешно завершена, ребята. Это работает нормально. И у нас также есть страницы Playwright, что очень удивительно. И вы видите, как удивительно это написано. И давайте перейдем к тесту и посмотрим, будет ли этот код работать. И снова, как я уже говорил, как только я начну делать это, все начнут говорить, что, возможно, вам нужно проверить логику, работает ли она или нет, потому что это тест, вы можете запустить этот тест и посмотреть и доказать, что ваш тест будет работать или нет. Так что лучший способ — это выбрать эти тесты и запустить все модульные тесты, просто так, и вы сразу же получите обратную связь, чтобы сказать, работают ли эти тесты на самом деле. Так что вы можете видеть, что он сейчас запускает тесты для меня здесь, и они проходят. Не то чтобы я собирался лгать вам, говоря, что этот код не будет работать. Он работает и проходит для нас здесь. И посмотрите, все работает, и есть несколько неудачных тестов. Я думаю, что все они должны были провалиться, потому что именно так тесты Selenium будут проваливаться для нас здесь. Но вы можете видеть, что уже тесты проходят здесь. Посмотрите. Все просто удивительно работает, что удивительно. И все тесты проходят для меня здесь, за исключением нескольких, которые должны были провалиться, потому что именно так я написал их в тесте Selenium. Но они проходят для меня здесь. Мы, вероятно, можем попросить в подсказке сказать: добавьте более подробную информацию, когда вы фактически преобразуете эти тесты для меня. Мы можем сделать все это, но это не имеет значения. Вы можете продолжать улучшать свои чат-режимы, как вы хотите. Но эй, угадайте что? Весь этот код, который у нас есть, преобразован, и у нас есть преобразование тестов Selenium с Playwright всего за несколько секунд, и этот код, эта подсказка, которую вы видите здесь, я помещу ее в свой репозиторий GitHub, чтобы вы могли использовать ее напрямую в своей организации и посмотреть, как она работает. Еще раз большое спасибо за просмотр этого видео. Дайте мне знать, что вы думаете об этих типах чат-режимов и как преобразования действительно могут помочь вам выполнять лучшую работу в вашей организации. Но еще раз большое спасибо за просмотр этого видео. Увидимся в следующем.