Какие элементы браузер найдет с помощью селектора ссылок

Обновлено: 21.11.2024

12.1 Введение в ссылки и якоря

HTML предлагает множество традиционных идиом для публикации форматированного текста и структурированных документов, но от большинства других языков разметки его отличает возможность работы с гипертекстом и интерактивными документами. В этом разделе представлена ​​ссылка (или гиперссылка, или веб-ссылка), основная конструкция гипертекста. Ссылка — это соединение одного веб-ресурса с другим. Несмотря на простую концепцию, ссылка была одной из основных движущих сил успеха Интернета.

A имеет два конца, которые называются, и направление. Ссылка начинается с привязки «источник» и указывает на привязку «назначение», которой может быть любой веб-ресурс (например, изображение, видеоклип, звуковой фрагмент, программа, HTML-документ, элемент в HTML-коде). документ и т. д.).

12.1.1 Посещение связанного ресурса

Поведением по умолчанию, связанным со ссылкой, является поиск другого веб-ресурса. Такое поведение обычно и неявно достигается путем выбора ссылки (например, щелчком мыши, вводом с клавиатуры и т. д.).

Следующий отрывок HTML содержит две ссылки, одна из которых представляет собой HTML-документ с именем «chapter2.html», а другая — изображение GIF в файле «forest.jpg»:

Активируя эти ссылки (щелкая мышью, вводя с клавиатуры, используя голосовые команды и т. д.), пользователи могут посещать эти ресурсы. Обратите внимание, что атрибут href в каждой исходной привязке указывает адрес целевой привязки с URI.

Якорь назначения ссылки может быть элементом HTML-документа. Якорю назначения должно быть присвоено имя якоря, и любой URI, обращающийся к этому якорю, должен включать это имя в качестве идентификатора фрагмента .

Якоря назначения в HTML-документах могут быть указаны либо элементом A (имя его с помощью атрибута name), либо любым другим элементом (название с помощью атрибута id).

Таким образом, например, автор может создать оглавление, записи которого ссылаются на элементы заголовка H2 , H3 и т. д. в том же документе. Используя элемент A для создания целевых привязок, мы напишем:

Того же эффекта можно добиться, сделав якорями сами элементы заголовка:

12.1.2 Другие отношения ссылок

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

роли ссылки, определенные с помощью A или LINK, указываются с помощью атрибутов rel и rev.

Например, ссылки, определяемые элементом LINK, могут описывать положение документа в серии документов. В следующем отрывке ссылки внутри документа под названием «Глава 5» указывают на предыдущую и следующую главы:

Тип первой ссылки — «предыдущая», а второй — «следующая» (два из нескольких распознаваемых типов ссылок). Ссылки, указанные с помощью LINK, не отображаются вместе с содержимым документа, хотя пользовательские агенты могут отображать их другими способами (например, в качестве инструментов навигации).

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

12.1.3 Указание якорей и ссылок

Несмотря на то, что некоторые элементы и атрибуты HTML создают ссылки на другие ресурсы (например, элемент IMG, элемент FORM и т. д.), в этой главе рассматриваются ссылки и привязки, создаваемые элементами LINK и A. Элемент LINK может появляться только в заголовке документа. Элемент A может появляться только в теле.

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

Полученный ресурс может обрабатываться агентом пользователя несколькими способами: путем открытия нового документа HTML в том же окне агента пользователя, открытия нового документа HTML в другом окне, запуска новой программы для обработки ресурса и т. д. , Поскольку элемент A имеет содержимое (текст, изображения и т. д.), пользовательские агенты могут отображать это содержимое таким образом, чтобы указывать на наличие ссылки (например, подчеркивая содержимое).

Когда установлены атрибуты name или id элемента A, этот элемент определяет привязку, которая может быть местом назначения других ссылок.

Авторы могут устанавливать атрибуты name и href одновременно в одном и том же экземпляре A.

Элемент LINK определяет связь между текущим документом и другим ресурсом. Хотя LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми пользовательскими агентами.

12.1.4 Заголовки ссылок

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

Таким образом, мы можем дополнить предыдущий пример, указав заголовок для каждой ссылки:

12.1.5 Интернационализация и ссылки

Поскольку ссылки могут указывать на документы, закодированные с использованием разных кодировок символов, элементы A и LINK поддерживают атрибут charset. Этот атрибут позволяет авторам сообщать пользовательским агентам о кодировании данных на другом конце ссылки.

Атрибут hreflang предоставляет агентам пользователя информацию о языке ресурса в конце ссылки, так же как атрибут lang предоставляет информацию о языке содержимого элемента или значений атрибутов.

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

12.2 Элемент A

Начальный тег: обязателен, Конечный тег: обязателен

name = cdata [CS] Этот атрибут дает имя текущему якорю, чтобы он мог быть местом назначения другой ссылки. Значение этого атрибута должно быть уникальным именем привязки. Областью действия этого имени является текущий документ. Обратите внимание, что этот атрибут использует то же пространство имен, что и атрибут id. href = uri [CT] Этот атрибут указывает местоположение веб-ресурса, тем самым определяя связь между текущим элементом (исходной привязкой) и целевой привязкой, определяемой этим атрибутом. hreflang = langcode [CI] Этот атрибут указывает базовый язык ресурса, обозначенного атрибутом href, и может использоваться только при указании атрибута href. type = content-type [CI] Этот атрибут дает рекомендательную подсказку относительно типа содержимого, доступного по целевому адресу ссылки. Это позволяет пользовательским агентам использовать резервный механизм, а не извлекать контент, если им сообщают, что они получат контент в типе контента, который они не поддерживают. Авторы, использующие этот атрибут, берут на себя ответственность за управление риском того, что он может стать несовместимым с содержимым, доступным по целевому адресу ссылки. Текущий список зарегистрированных типов контента см. в [MIMETYPES]. rel = link-types [CI] Этот атрибут описывает отношение текущего документа к якорю, указанному атрибутом href. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. rev = link-types [CI] Этот атрибут используется для описания обратной ссылки от привязки, заданной атрибутом href, к текущему документу. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. charset = charset [CI] Этот атрибут указывает кодировку символов ресурса, указанного ссылкой. Дополнительные сведения см. в разделе о кодировках символов.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы документа)
  • lang (информация о языке), dir (направление текста)
  • заголовок (название элемента)
  • стиль (информация о встроенном стиле)
  • форма и координаты (карты изображений)
  • onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
  • target (информация о целевом кадре)
  • tabindex (навигация с помощью вкладок)
  • accesskey (клавиши доступа)

Каждый элемент A определяет якорь

  1. Содержимое элемента A определяет положение привязки.
  2. Атрибут name называет якорь таким образом, что он может быть местом назначения для нескольких ссылок (см. также якоря с идентификатором ).
  3. Атрибут href делает эту привязку исходной привязкой ровно для одной ссылки.

Авторы также могут создать элемент A, в котором не указаны привязки, т. е. не указаны href , name или id . Значения этих атрибутов могут быть установлены позже с помощью скриптов.

В следующем примере элемент A определяет ссылку. Якорь источника — это текст «Веб-сайт W3C», а якорь назначения — «http://www.w3.org/»:

Эта ссылка указывает на домашнюю страницу консорциума World Wide Web. Когда пользователь активирует эту ссылку в пользовательском агенте, пользовательский агент получит ресурс, в данном случае HTML-документ.

Пользовательские агенты обычно отображают ссылки таким образом, чтобы сделать их очевидными для пользователей (подчеркивание, перевернутое видео и т. д.). Точный рендеринг зависит от пользовательского агента. Отображение может варьироваться в зависимости от того, посещал ли пользователь уже ссылку или нет. Возможный визуальный рендеринг предыдущей ссылки может быть:

Чтобы явно указать пользовательским агентам кодировку символов на целевой странице, установите атрибут charset:

Предположим, мы определяем привязку с именем "anchor-one" в файле "one.html".

Это создает привязку вокруг текста "Это расположение первой привязки". Обычно содержимое A не отображается каким-либо особым образом, когда A определяет только якорь.

Таким образом, ссылка, определенная в файле "two.html" в том же каталоге, что и "one.html", будет ссылаться на привязку следующим образом:

Элемент A в следующем примере указывает ссылку (с помощью href ) и одновременно создает именованный якорь (с именем ):

Этот пример содержит ссылку на веб-ресурс другого типа (изображение PNG). Активация ссылки должна привести к получению ресурса изображения из Интернета (и, возможно, отображению, если система настроена на это).

Примечание. Пользовательские агенты должны иметь возможность находить якоря, созданные пустыми элементами A, но некоторые из них не могут этого сделать. Например, некоторые пользовательские агенты могут не найти «пустую привязку» в следующем фрагменте HTML:

12.2.1 Синтаксис имен привязок

Имя привязки — это значение атрибута name или id при использовании в контексте привязок. Имена якорей должны соответствовать следующим правилам:

  • Уникальность. Имена привязок должны быть уникальными в пределах документа. Имена привязок, отличающиеся только регистром, могут не отображаться в одном и том же документе.
  • Сопоставление строк. Сравнение идентификаторов фрагментов и имен привязок должно выполняться путем точного (с учетом регистра) совпадения.

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

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий пример недопустим с точки зрения уникальности, поскольку два имени совпадают, за исключением регистра:

Несмотря на то, что следующий отрывок является допустимым HTML, поведение пользовательского агента не определено; некоторые пользовательские агенты могут (ошибочно) считать это совпадением, а другие — нет.

12.2.2 Вложенные ссылки запрещены

Ссылки и привязки, определяемые элементом A, не должны быть вложенными; элемент A не должен содержать никаких других элементов A.

Поскольку DTD определяет элемент LINK как пустой, элементы LINK также не могут быть вложенными.

12.2.3 Якоря с атрибутом id

Атрибут id можно использовать для создания привязки в начальном теге любого элемента (включая элемент A).

В этом примере показано использование атрибута id для позиционирования привязки в элементе H2. Якорь связан с элементом A.

В следующем примере якорь назначения именуется с помощью атрибута id:

Атрибуты id и name используют одно и то же пространство имен. Это означает, что они не могут оба определить привязку с одним и тем же именем в одном и том же документе. Допустимо использовать оба атрибута для указания уникального идентификатора элемента для следующих элементов: A, APPLET, FORM, FRAME, IFRAME, IMG и MAP. Когда оба атрибута используются в одном элементе, их значения должны быть идентичными.

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий отрывок является недопустимым HTML, поскольку эти атрибуты объявляют одно и то же имя дважды в одном и том же документе.

Следующий пример показывает, что идентификатор и имя должны совпадать, когда они оба появляются в открывающем теге элемента:

Использовать идентификатор или имя? При принятии решения об использовании идентификатора или имени для имени привязки авторам следует учитывать следующие факторы:

  • Атрибут id может действовать не только как имя привязки (например, селектор таблицы стилей, идентификатор обработки и т. д.).
  • Некоторые старые пользовательские агенты не поддерживают привязки, созданные с помощью атрибута id.
  • Атрибут name позволяет использовать более подробные имена якорей (с объектами).

12.2.4 Недоступные и неидентифицируемые ресурсы

Ссылка на недоступный или неидентифицируемый ресурс является ошибкой. Хотя пользовательские агенты могут по-разному обрабатывать такую ​​ошибку, мы рекомендуем следующее поведение:

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

12.3 Отношения между документами: элемент LINK

Начальный тег: обязателен, Конечный тег: запрещен

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы документа)
  • lang (информация о языке), dir (направление текста)
  • заголовок (название элемента)
  • стиль (информация о встроенном стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
  • href , hreflang , type , rel , rev (ссылки и привязки)
  • target (информация о целевом кадре)
  • медиа (информация о стиле заголовка)
  • кодировка (кодировки символов)

Этот элемент определяет ссылку. В отличие от A, он может появляться только в разделе HEAD документа, хотя может появляться любое количество раз. Хотя ССЫЛКА не имеет содержимого, она передает информацию о взаимоотношениях, которая может отображаться агентами пользователя различными способами (например, панель инструментов с раскрывающимся меню ссылок).

В этом примере показано, как несколько определений LINK могут отображаться в разделе HEAD документа. Текущий документ - "Chapter2.html". Атрибут rel определяет отношение связанного документа с текущим документом. Значения «Index», «Next» и «Prev» объясняются в разделе, посвященном типам ссылок.

12.3.1 Прямые и обратные ссылки

Атрибуты rel и rev дополняют друг друга: атрибут rel указывает прямую ссылку, а атрибут rev — обратную.

Рассмотрите два документа A и B.

Имеет то же значение, что и:

Оба атрибута могут быть указаны одновременно.

12.3.2 Ссылки и внешние таблицы стилей

Когда элемент LINK связывает внешнюю таблицу стилей с документом, атрибут type указывает язык таблицы стилей, а атрибут media указывает предполагаемый носитель или носитель рендеринга. Пользовательские агенты могут сэкономить время, извлекая из сети только те таблицы стилей, которые применимы к текущему устройству.

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

12.3.3 Ссылки и поисковые системы

Авторы могут использовать элемент LINK для предоставления поисковым системам различной информации, в том числе:

  • Ссылки на альтернативные версии документа, написанные на другом человеческом языке.
  • Ссылки на альтернативные версии документа, предназначенные для разных носителей, например версию, специально подходящую для печати.
  • Ссылки на начальную страницу коллекции документов.

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

В следующем примере мы используем атрибут hreflang, чтобы сообщить поисковым системам, где найти версии документа на голландском, португальском и арабском языках. Обратите внимание на использование атрибута charset для арабского руководства. Обратите также внимание на использование атрибута lang для указания того, что значение атрибута title для элемента LINK, обозначающего руководство на французском языке, указано на французском языке.

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

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

Дополнительная информация содержится в примечаниях в приложении о том, как помочь поисковым системам проиндексировать ваш веб-сайт.

12.4 Информация о пути: элемент BASE

Начальный тег: обязателен, Конечный тег: запрещен

href = uri [CT] Этот атрибут указывает абсолютный URI, который действует как базовый URI для разрешения относительных URI.

Атрибуты, определенные в другом месте

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

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

Например, при наличии следующего объявления BASE и объявления A:

относительный URI "../cages/birds.jpg" будет разрешаться следующим образом:

12.4.1 Разрешение относительных URI

Агенты пользователя должны вычислять базовый URI для разрешения относительных URI в соответствии с [RFC1808], раздел 3. Ниже описано, как [RFC1808] применяется конкретно к HTML.

Агенты пользователя должны вычислять базовый URI в соответствии со следующими приоритетами (от наивысшего приоритета к низшему):

Кроме того, элементы OBJECT и APPLET определяют атрибуты, которые имеют приоритет над значением, установленным элементом BASE. Пожалуйста, ознакомьтесь с определениями этих элементов для получения дополнительной информации о связанных с ними проблемах URI.

Протокол WebDriver предоставляет несколько стратегий выбора для запроса элемента. WebdriverIO упрощает их, чтобы упростить выбор элементов.Обратите внимание, что хотя команда для запроса элементов называется $ и $$, они не имеют ничего общего с jQuery или Sizzle Selector Engine. Поддерживаются следующие типы селекторов:

Селектор запросов CSS

Текст ссылки

Чтобы получить элемент привязки с определенным текстом, запросите текст, начинающийся со знака равенства (=).

Вы можете запросить этот элемент, вызвав:

Частичный текст ссылки

Чтобы найти элемент привязки, видимый текст которого частично соответствует вашему поисковому запросу, запросите его, используя *= перед строкой запроса (например, *=driver ).

Вы можете запросить этот элемент, вызвав:

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

Элемент с определенным текстом

Тот же метод можно применить и к элементам.

Например, вот запрос для заголовка уровня 1 с текстом "Добро пожаловать на мою страницу":

Вы можете запросить этот элемент, вызвав:

Или используя частичный текст запроса:

То же самое работает для имен идентификаторов и классов:

Вы можете запросить этот элемент, вызвав:

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

Имя тега

Чтобы запросить элемент с определенным именем тега, используйте или .

Вы можете запросить этот элемент, вызвав:

Атрибут имени

Для запроса элементов с определенным атрибутом имени вы можете использовать либо обычный селектор CSS3, либо предложенную стратегию имен из JSONWireProtocol, передав что-то вроде [name="some-name"] в качестве параметра селектора:

Примечание. Эта стратегия селектора устарела и работает только в старых браузерах, работающих по протоколу JSONWireProtocol или с помощью Appium.

xPath

Также можно запрашивать элементы через определенный xPath.

Селектор xPath имеет следующий формат: //body/div[6]/div[1]/span[1] .

Вы можете запросить второй абзац, вызвав:

Вы также можете использовать xPath для перемещения вверх и вниз по дереву DOM:

ARIA – Атрибут роли

Для запроса элементов на основе ролей ARIA вы можете напрямую указать роль элемента, например [role=button], в качестве параметра селектора:

Атрибут идентификатора

Стратегия локатора "id" не поддерживается в протоколе WebDriver, вместо этого следует использовать стратегии селектора CSS или xPath для поиска элементов с использованием идентификатора.

Однако некоторые драйверы (например, Appium You.i Engine Driver) могут по-прежнему поддерживать этот селектор.

JS-функция

Вы также можете использовать функции JavaScript для получения элементов с помощью собственных веб-API. Конечно, это можно сделать только в веб-контексте (например, в браузере или в веб-контексте на мобильных устройствах).

Глубокие селекторы

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

С помощью этого селектора вы можете запросить элемент, вложенный в другой теневой DOM, например:

Мобильные селекторы

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

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

Android UiAutomator​

Среда Android UI Automator предоставляет несколько способов поиска элементов. Вы можете использовать API автоматизатора пользовательского интерфейса, в частности класс UiSelector, для поиска элементов. В Appium вы отправляете код Java в виде строки на сервер, который выполняет его в среде приложения, возвращая элемент или элементы.

Android DataMatcher и ViewMatcher (только для эспрессо)

Стратегия DataMatcher для Android позволяет находить элементы с помощью Data Matcher

Тег просмотра Android (только эспрессо)

Стратегия просмотра тегов обеспечивает удобный способ поиска элементов по их тегу.

Автоматизация пользовательского интерфейса iOS

При автоматизации приложения iOS для поиска элементов можно использовать платформу Apple UI Automation.

У этого JavaScript API есть методы для доступа к представлению и всему, что в нем находится.

Вы также можете использовать предикатный поиск в iOS UI Automation в Appium, чтобы еще больше уточнить выбор элементов. Подробнее см. здесь.

iOS XCUITest для строк предикатов и цепочек классов

В iOS 10 и более поздних версиях (с использованием драйвера XCUITest) вы можете использовать строки-предикаты:

Идентификатор доступности

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

  • Для iOS это идентификатор доступности, представленный Apple здесь.
  • Для Android идентификатор доступности сопоставляется с описанием содержимого элемента, как описано здесь.

Для обеих платформ получение элемента (или нескольких элементов) по их идентификатору доступности обычно является лучшим методом. Это также предпочтительнее устаревшей стратегии имен.

Имя класса

Стратегия имени класса — это строка, представляющая элемент пользовательского интерфейса в текущем представлении.

Селекторы цепочек

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

Например, если у вас есть структура DOM, например:

И вы хотите добавить товар Б в корзину, это будет сложно сделать только с помощью селектора CSS.

С цепочкой селекторов все намного проще. Просто сузьте нужный элемент шаг за шагом:

Селектор изображений Appium

Используя стратегию локатора -image, можно отправить Appium файл изображения, представляющий элемент, к которому вы хотите получить доступ.

Поддерживаемые форматы файлов jpg,png,gif,bmp,svg

Полный справочник можно найти здесь

Примечание. Способ работы Appium с этим селектором заключается в том, что он внутренне делает снимок экрана (приложения) и использует предоставленный селектор изображения, чтобы проверить, можно ли найти элемент на этом снимке экрана (приложения).

Имейте в виду, что Appium может изменить размер сделанного снимка экрана (приложения), чтобы он соответствовал размеру CSS вашего экрана (приложения) (это произойдет на iPhone, а также на компьютерах Mac с дисплеем Retina, поскольку DPR больше 1). Это приведет к тому, что совпадение не будет найдено, поскольку предоставленный селектор изображений мог быть взят из исходного снимка экрана. Вы можете исправить это, обновив настройки Appium Server, см. документы Appium для настроек и этот комментарий с подробным объяснением.

Селекторы React

WebdriverIO позволяет выбирать компоненты React на основе имени компонента. Для этого у вас есть выбор из двух команд: react$ и react$$ .

Эти команды позволяют выбирать компоненты из React VirtualDOM и возвращать либо один элемент WebdriverIO, либо массив элементов (в зависимости от того, какая функция используется).

Примечание. Команды react$ и react$$ аналогичны по функциональности, за исключением того, что react$$ возвращает все совпадающие экземпляры в виде массива элементов WebdriverIO, а react$ возвращает первый найденный экземпляр.

Базовый пример

В приведенном выше коде есть простой экземпляр MyComponent внутри приложения, который React отображает внутри элемента HTML с id="root" .

С помощью команды browser.react$ вы можете выбрать экземпляр MyComponent:

Теперь, когда у вас есть элемент WebdriverIO, сохраненный в переменной myCmp, вы можете выполнять для него команды элемента.

Фильтрация компонентов

Библиотека, которую WebdriverIO использует внутри, позволяет фильтровать ваш выбор по свойствам и/или состоянию компонента. Для этого вам нужно передать второй аргумент реквизита и/или третий аргумент состояния в команду браузера.

Если вы хотите выбрать экземпляр MyComponent с именем свойства WebdriverIO , вы можете выполнить следующую команду:

Если вы хотите отфильтровать наш выбор по состоянию, команда браузера будет выглядеть примерно так:

Работа с React.Fragment

При использовании команды react$ для выбора фрагментов React WebdriverIO вернет первый дочерний элемент этого компонента в качестве узла компонента. Если вы используете react$$ , вы получите массив, содержащий все узлы HTML внутри фрагментов, соответствующих селектору.

С учетом приведенного выше примера команды будут работать следующим образом:

Примечание. Если у вас есть несколько экземпляров MyComponent и вы используете react$$ для выбора этих компонентов-фрагментов, вам будет возвращен одномерный массив всех узлов. Другими словами, если у вас есть 3 экземпляра, вам будет возвращен массив с шестью элементами WebdriverIO.

Стратегии пользовательского выбора

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

Учитывая следующий фрагмент HTML:

Затем используйте его, вызвав:

Примечание: это работает только в веб-среде, в которой можно запустить команду execute.

Обновлено 2 года назад Ривером Слоаном

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

Мы не можем предоставить вам пользовательский код, но мы надеемся, что это руководство поможет вам найти то, что вы ищете! 🙃

Вот руководство о том, как настроить таргетинг на элементы базы знаний и настроить их в соответствии с вашим брендом.

Как найти консоль разработчика в браузере

Самое первое, что вам нужно сделать, это найти консоль разработчика в браузере.

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

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

Хром

Это будет выглядеть либо как вертикальное многоточие (если вы очень умны и постоянно обновляете Chrome), либо как стрелка с растущим покраснением (если вы похожи на меня и не закрыли Chrome в этом году).

Вы также можете использовать клавиатуру с помощью этих сочетаний клавиш:

Уже знаете элемент, на который хотите настроить таргетинг? Просто щелкните правой кнопкой мыши и выберите «Проверить». Это вызовет селекторы CSS для этого элемента.

Сафари

Вы также можете использовать клавиатуру с помощью этого сочетания клавиш:

Уже знаете элемент, на который хотите настроить таргетинг? Просто щелкните правой кнопкой мыши и выберите «Проверить элемент». Это вызовет селекторы CSS для этого элемента.

Майкрософт Эдж

Вы также можете использовать клавиатуру с помощью этих сочетаний клавиш:

Уже знаете элемент, на который хотите настроить таргетинг?

Сначала включите проверки, введя about:flags в строку URL, а затем отметьте «Показать «Просмотр источника» и «Проверить элемент» в контекстном меню. Затем щелкните правой кнопкой мыши и нажмите "Проверить элемент", чтобы просмотреть селекторы CSS для этого элемента.

Интернет-обозреватель

Вы также можете использовать клавиатуру с помощью этих сочетаний клавиш:

Мы настоятельно рекомендуем переключиться на Microsoft Edge, если вы используете Internet Explorer. Он больше не получает обновления.

Уже знаете элемент, на который хотите настроить таргетинг? Откройте меню разработчика (F12) и нажмите Ctrl + B. Затем щелкните нужный элемент.

Файрфокс

Вы также можете использовать клавиатуру с помощью этих сочетаний клавиш:

Уже знаете элемент, на который хотите настроить таргетинг? Просто щелкните правой кнопкой мыши и выберите «Проверить элемент». Это вызовет селекторы CSS для этого элемента.

Опера

Вы также можете использовать клавиатуру с помощью этих сочетаний клавиш:

Уже знаете элемент, на который хотите настроить таргетинг? Просто щелкните правой кнопкой мыши и выберите «Проверить». Это вызовет селекторы CSS для этого элемента.

Как найти правильные селекторы CSS

Фантастика! Итак, к настоящему времени вы должны иметь возможность вызывать консоль разработчика либо с помощью меню, либо путем проверки элемента на странице. Хорошая работа до сих пор. Вы уже на пути к настройке своих справочных документов 👍

Теперь давайте рассмотрим пример. Я буду использовать Chrome DevTools, чтобы изменить цвет всех ссылок в статьях с розового на фиолетовый.

Это почти все. Для получения более продвинутых руководств по использованию CSS перейдите на страницу Удачи и получайте удовольствие, настраивая свои HelpDocs! 👩‍🎨

В этой статье будет обсуждаться и описываться с примерами, как можно использовать селекторы CSS для идентификации веб-элементов в тестах Selenium. Он также отображает синтаксис селекторов CSS в Selenium.

Рекомендуется получить более глубокое представление о локаторах в Selenium, прежде чем сужать его до конкретных селекторов CSS.

Что такое селектор CSS?

По сути, селектор CSS сочетает в себе селектор элемента и значение селектора, которое может идентифицировать определенные элементы на веб-странице. Как и XPath, селектор CSS можно использовать для поиска веб-элементов без идентификатора, класса или имени.

Типы селекторов CSS (с примерами)

В тестах Selenium есть 5 типов селекторов CSS-

  1. Идентификатор
  2. Класс
  3. Атрибут
  4. Подстрока
  5. Внутренняя строка

1. идентификатор

Текстовое поле содержит атрибут ID со значением «Электронная почта».В этом случае атрибут ID и его значение используются для создания селектора CSS, который разрешает доступ к текстовому полю.

Как создать Selenium CSS Selector для веб-элемента

Найдите веб-элемент — текстовое поле электронной почты. HTML-тег здесь — «вход», а значение атрибута ID — «Электронная почта». Вместе они относятся к текстовому полю электронной почты. Это данные, необходимые для создания селектора CSS.

Проверить значение локатора

Синтаксис

При указании селектора CSS в целевом текстовом поле Selenium IDE убедитесь, что ему предшествует «css=».

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

2. Класс

Флажок содержит атрибут класса со значением «запомнить». Этот атрибут и значение Class можно использовать для создания селектора CSS, который обращается к выбранному веб-элементу.

Вот как создать селектор CSS для веб-элемента

Найдите веб-элемент — установите флажок «Оставаться в системе». HTML-тег в этом случае — «метка», а значение атрибута ID — «запомнить». В совокупности они относятся к флажку «Оставаться в системе».

Проверить значение локатора

Введите «css=label.remember» (значение локатора) в Selenium IDE. Нажмите кнопку «Найти». Флажок «Оставаться в системе» выделен, подтверждая значение локатора.

Синтаксис

    <ли>. : точка используется для обозначения атрибута класса. Обратите внимание, что точка является обязательной в тех случаях, когда атрибут класса используется для создания селектора CSS. Перед значением класса всегда ставится точка.

3. Атрибут

Кнопка «Войти» имеет атрибут type со значением «отправить». Этот атрибут type и его значение можно использовать для создания селектора CSS, который будет обращаться к предпочтительному веб-элементу.

Вот как создать селектор CSS в Selenium для веб-элемента

Найдите веб-элемент — кнопку «Войти». HTML-тег в данном случае — это «ввод», атрибут — это тип, а значение атрибута — «отправить». В совокупности они относятся к кнопке «Войти».

Проверить значение локатора

Введите «css=input[type=’submit’]» (значение локатора) в Selenium IDE. Нажмите кнопку «Найти». Кнопка «Войти» будет выделена, подтверждая значение локатора.

Синтаксис

  • Атрибут: используется для создания селектора CSS. Это может быть значение, тип, имя и т. д. Лучше всего выбрать атрибут со значением, которое однозначно идентифицирует веб-элемент, к которому осуществляется доступ.
  • Значение атрибута: значение атрибута, к которому осуществляется доступ.

Совет для профессионалов. Хотите глубже изучить реализацию Selenium в BrowserStack с помощью бесплатных интерактивных курсов и лабораторных упражнений? Посетите тестовый университет

4. Подстрока

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

Типы механизмов, используемых для сопоставления подстрок

  • Соответствие префиксу
  • Соответствие суффиксу
  • Соответствие подстроке

Соответствие префиксу

Целью этого является сопоставление строки с использованием соответствующего префикса.

Синтаксис

  • ^ : символ, используемый для сопоставления строки с использованием префикса.
  • Префикс: строка, на основе которой выполняется операция сопоставления.

Если кто-то намеревается идентифицировать «текстовое поле пароля», селектор CSS в этом случае будет:

Соответствие суффиксу

Целью этого является сопоставление строки с помощью совпадающего суффикса.

Синтаксис

Опять же, если кто-то намеревается идентифицировать «текстовое поле пароля», селектор CSS в этом случае будет:

Соответствие подстроке

Целью этого является сопоставление строки с помощью совпадающей подстроки.

Синтаксис

  • *: символ для сопоставления строки с использованием подстроки
  • Подстрока: строка, на основе которой выполняется операция сопоставления.

Опять же, если кто-то намеревается идентифицировать «текстовое поле пароля», соответствующий селектор CSS будет:

5. Внутренний текст

Использование внутреннего текста помогает идентифицировать и создавать селекторы CSS в Selenium WebDriver, используя шаблон строки, который HTML-тег демонстрирует на веб-странице. Этот механизм чаще всего используется для поиска веб-элементов из-за его упрощенного синтаксиса.

Тег привязки, представляющий эту гиперссылку, содержит некоторый текст. Этот текст можно использовать для создания селектора CSS, который находит нужный веб-элемент.

Синтаксис

  • : двоеточие используется для обозначения метода contains.
  • содержит — значение атрибута Class, к которому осуществляется доступ
    Обновление:Функция устарела и больше не поддерживается стандартом W3C. Стандарт CSS Selectors Level 3 применим ко всем основным браузерам.
  • текст — текст, отображаемый в любом месте веб-страницы, независимо от его местоположения.

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

Читайте также: