Программирование и инструменты разработчика

Бесплатный генератор CSS-селекторов.

Селектор с объяснением специфичности и устойчивости.

Разрабатывайте селектор по реальной структуре страницы и проверяйте его область перед применением в браузерной задаче.

Нужны расширение Chrome и аккаунт.
25 бесплатных задач автоматизации в месяц суммарно для всех инструментов. Действуют ограничения провайдера в браузере.

ЧТО НУЖНО ПОДГОТОВИТЬ

Предоставленный фрагмент DOM и целевой элемент.

ОТПРАВНАЯ ТОЧКА

Задача, которую можно настроить под себя.

Скопируйте здесь. Вставьте в WebAct, когда будете готовы.

Эта страница подготавливает промпт. Задача выполняется в WebAct.

01

Настройте задачу под себя.

Проверьте промпт выше. Добавьте свою цель и важные требования.

02

Перенесите задачу в WebAct.

Откройте WebAct, вставьте задачу и предоставьте исходные материалы. Начните с Chat для черновика или пояснения; используйте Task для одобренного действия в браузере или файла.

03

Проверьте полезную часть.

Проверяйте формулы, код и вычисления на известных входных данных в подходящей среде выполнения. Просматривайте действия до запуска и сохраняйте исходные данные доступными.

ПРАКТИЧЕСКОЕ РУКОВОДСТВО

Как создавать устойчивые CSS-селекторы с нужной областью.

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

Адаптируйте процесс под свою задачу.

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

Что вы предоставляете
Предоставленный фрагмент DOM и целевой элемент.
Что вы получите
Селектор с объяснением специфичности и устойчивости.

Посмотрите входные данные и результат.

Иллюстративные входные и выходные данные · учебный пример, а не реальный запуск WebAct

Полей ввода: Пример

DOM contains a button with data-action="export".

Готовый пример

button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
Скачать этот пример

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

Решения и устранение проблем.

Должен ли селектор опираться на текущую позицию элемента в списке?

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

Почему селектор находит несколько кнопок экспорта?

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

Попробуйте на собственном источнике.

Замените пример своим материалом в промпте. Сохраните нужные требования и скопируйте задачу в WebAct.

Настроить и скопировать задачу ↑
ПЕРЕД НАЧАЛОМ

Использование WebAct.

Промпт и пример доступны здесь. Выполните задачу в расширении WebAct для Chrome.

Этот инструмент бесплатный?

Здесь можно бесплатно копировать и редактировать промпт. Для использования с WebAct установите расширение Chrome, создайте и подтвердите аккаунт и подключите доступную сессию ChatGPT в браузере. План Free включает 25 задач автоматизации, запускаемых пользователем, за календарный месяц суммарно для всех инструментов. Обычный браузерный Chat учитывается отдельно; действуют ограничения провайдера.

Узнайте об общем контексте в нашем политике конфиденциальности и о выборе между Chat и Task.

ОТ ПРОМПТА К ВАШЕЙ РАБОТЕ

Перенесите задачу на свою страницу.

Установите WebAct, добавьте исходные материалы и адаптируйте результат.

Установить WebAct