CSS селектор в Selenium

по: Krishna Рунгта Krishna Рунгта
Hours Обновено

⚡ Умно обобщение

CSS селектор в Selenium е мощна стратегия за локализиране, която идентифицира елементи, използвайки HTML тагове, идентификатори, класове, атрибути и шаблони за вътрешен текст. Този ресурс обяснява всеки тип CSS селектор с подробни примери за Selenium SDI.

  • 🆔 Етикет и идентификатор: Комбинирайте HTML таг с префикса #, за да насочите елементи, които имат точно уникален атрибут ID.
  • 🎯 Етикет и клас: Използвайте синтаксиса с точка (.), за да намерите елементи, споделящи CSS клас, което е полезно за повтарящи се UI компоненти.
  • 🧩 Етикет и атрибут: Приложете скоби [attribute=value], за да идентифицирате елементи чрез име, тип или произволна персонализирана двойка атрибути.
  • 🪜 Етикет, клас и атрибут: Комбинирайте множество условия, за да разграничите елементите, които споделят както имена на класове, така и стойности на атрибути.
  • 🔤 Съвпадение на вътрешния текст: Използвайте шаблона :contains(“text”), за да намерите етикети и елементи, на които липсват идентификатори, имена или класове.
  • ✅ Най-добри практики: Предпочитайте стабилни идентификатори пред дълбоко вложени селектори, за да запазите Selenium скриптове за автоматизация, устойчиви на промени в потребителския интерфейс.
Прочетете повече

CSS селектор в Selenium

Какво е CSS селектор в Selenium?

A CSS селектор в Selenium е низов шаблон, който идентифицира уеб елемент чрез комбинация от HTML таг, идентификатор, клас и атрибути. CSS селекторите са малко по-сложни от локализирането по идентификатор или име, но са най-популярната стратегия сред опитните. Selenium потребители, защото те могат да достигнат до елементи, които изобщо нямат атрибут ID или Name.

CSS селектори в Selenium се предлагат в много форми, но това ръководство се фокусира върху петте най-често срещани модела, използвани в Selenium SDI:

  • Етикет и ID
  • Етикет и клас
  • Етикет и атрибут
  • Етикет, клас и атрибут
  • Вътрешен текст

Когато използвате тази стратегия в Selenium IDE, винаги поставяйте префикса Target кутия с „css=„както е показано във всеки пример по-долу.“

Защо да използваме CSS селектори в Selenium?

CSS селекторите са предпочитаната стратегия за локализиране за много хора. Selenium инженери по автоматизация, защото те балансират скорост, гъвкавост и четимост. Съвременните уеб приложения често използват динамично генерирани идентификатори или премахват изцяло атрибутите на имена, оставяйки CSS селекторите като единствения надежден начин за насочване към конкретен елемент на страницата.

Основните предимства на използването на CSS селектори включват:

  • Изпълнение: CSS селекторите се обработват от вградения енджин на браузъра, така че се изпълняват по-бързо от еквивалентните XPath изрази, особено в по-стари браузъри като Internet Explorer.
  • гъвкавост: Те комбинират логика на етикети, класове, атрибути и частично съвпадение, което позволява на тестерите да се насочват към елементи, които нямат стабилен идентификатор.
  • Точност: Синтаксисът отразява начина, по който разработчиците вече пишат CSS правила, което скъсява кривата на обучение както за QA инженерите, така и за front-end екипите.
  • Кросбраузърна стабилност: CSS селекторите се държат еднакво в Chrome, Firefox, Edge и Safari, намалявайки нестабилните неуспехи при тестове.

Таг и идентификатор – CSS селектор

Този пример използва текстовото поле „Имейл“ на страницата за вход във Facebook. Елементът има идентификатор „електронна поща„, и вече е бил достъпен в раздела „Локализиране по ID“. Сега същият елемент е насочен с помощта на Selenium CSS селектор с атрибута ID.

Синтаксис

css=tag#id

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • # = знакът „диез“, който винаги трябва да присъства при използване на Selenium CSS селектор с ID
  • id = ID на елемента, до който се осъществява достъп

Имайте предвид, че идентификационният номер винаги се предшества от знак за решетка (#).

Стъпка 1) Отидете до www.facebook.comИзползвайки DevTools на вашия браузър (или друг инструмент, като Firebug), проверете текстовото поле „Имейл или телефон“.

Обърнете внимание, че HTML тагът е „вход„и неговият идентификатор е „електронна поща„. Следователно пълният CSS селектор става „css=въвеждане#имейл".

Таг и идентификатор - CSS селектор в Selenium

Стъпка 2) Въведете „css=въвеждане#имейл" в Target кутия от Selenium IDE и щракнете върху бутона Намери. Selenium IDE маркира съответстващия елемент на страницата.

Selenium IDE подчертава полето за имейл чрез етикет и идентификатор

Таг и клас – CSS селектор

CSS селектор в Selenium който използва HTML етикет и име на клас, следва същата идея като етикет и идентификатор, но точка (.) замества знака за диез.

Синтаксис

css=tag.class

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • . = знакът за точка, който винаги трябва да присъства, когато се използва CSS селектор с клас
  • class = класът на елемента, до който се осъществява достъп

Стъпка 1) Отворете демонстрационната страница https://demo.guru99.com/test/facebook.html и проверете текстовото поле „Имейл или телефон“. Обърнете внимание, че HTML тагът е „вход„и неговият клас е „въведен текст".

Таг и клас - CSS селектор в Selenium

Стъпка 2) In Selenium IDE, въведете „css=input.inputtext"В Target и щракнете върху Намери. Selenium IDE разпознава текстовото поле „Имейл“ или „Телефон“.

Selenium IDE локализиране на елемент по етикет и клас

Обърнете внимание, че когато множество елементи споделят един и същ HTML таг и клас, се разпознава само първият съответстващ елемент в изходния код. Проверете текстовото поле „Парола“ на същата страница и обърнете внимание, че то е от същия клас като текстовото поле „Имейл“ или „Телефон“.

Няколко елемента, споделящи един и същ етикет и клас

В предишната илюстрация беше маркирано само текстовото поле „Имейл“ или „Телефон“, защото то се появява първо в изходния код на страницата.

Определяне на реда на изходния код на страницата Selenium мач

Таг и атрибут – CSS селектор

Тази стратегия комбинира HTML таг със специфичен атрибут, принадлежащ на елемента, до който искате да получите достъп.

Синтаксис

css=tag[attribute=value]

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • [ и ] = квадратни скоби, които обгръщат атрибута и съответстващата му стойност
  • атрибут = атрибутът, който ще се използва. Изберете такъв, който е уникален за елемента, като например име или идентификатор.
  • стойност = съответната стойност на избрания атрибут.

Стъпка 1) Придвижете се до Mercury Страница за регистрация на турове https://demo.guru99.com/test/newtours/register.php и проверете текстовото поле „Фамилия“. Обърнете внимание на HTML етикета му („input“) и атрибута му name („lastName“).

Таг и атрибут - CSS селектор в Selenium

Стъпка 2) In Selenium IDE, въведете „css=вход[име=фамилия]"В Target и щракнете върху Намери. Selenium IDE успешно намира полето „Фамилия“.

Selenium IDE намиране на фамилно име чрез атрибут

Когато множество елементи споделят един и същ HTML таг и атрибут, само първият се разпознава. Поведението е идентично с намирането на елементи със същия етикет и клас.

СВЪРЗАНИ СТАТИИ

Таг, клас и атрибут – CSS селектор

Синтаксис

css=tag.class[attribute=value]

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • . = знакът за точка, който винаги трябва да присъства, когато се използва CSS селектор с клас
  • class = класът на елемента, до който се осъществява достъп
  • [ и ] = квадратни скоби, които обгръщат специфичен атрибут и съответстващата му стойност
  • атрибут = атрибутът, който ще се използва. Изберете такъв, който е уникален за елемента, като например име или идентификатор.
  • стойност = съответната стойност на избрания атрибут.

Стъпка 1) Отворете демонстрационната страница https://demo.guru99.com/test/facebook.html и проверете полетата за въвеждане „Имейл или телефон“ и „Парола“. Обърнете внимание на техния HTML таг, клас и атрибути. Този пример използва „tabindexатрибут „“.

Таг, клас и атрибут - CSS селектор

Стъпка 2) Първо отворете текстовото поле „Имейл или телефон“, като използвате стойност на tabindex от 1. Въведете „css=input.inputtext[tabindex=1]”В Selenium IDE Target полето и щракнете върху „Намери“. Полето „Имейл“ или „Телефон“ е маркирано.

Selenium IDE намиране на имейл по етикет, клас, атрибут

Стъпка 3) За да насочите полето за въвеждане на парола, просто заменете стойността на tabindex. Въведете „css=input.inputtext[tabindex=2]"В Target и щракнете върху Намери. Selenium IDE успешно намира текстовото поле за парола.

Selenium Намиране на парола в IDE по етикет, клас, атрибут

Вътрешен текст – CSS селектор

HTML етикетите рядко получават атрибути id, name или class. И така, как да получите достъп до тях в SeleniumОтговорът се крие във вътрешния им текст. Вътрешните текстове са действителните низови модели, които HTML етикетът показва на страницата.

Синтаксис

css=tag:contains("inner text")

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • вътрешен текст = видимото текстово съдържание на елемента

Стъпка 1) Придвижете се до Mercury Начална страница на Tours https://demo.guru99.com/test/newtours/ и проверете етикета „Password“. Обърнете внимание на HTML етикета му („font“ в този случай) и наблюдавайте, че елементът няма атрибути class, id или name.

Вътрешен текст - проверка на CSS селектора

Стъпка 2) Тип css=font:contains(“Парола:”) в Selenium IDE Target и щракнете върху Намери. Selenium IDE намира етикета за парола, както е показано по-долу.

Selenium IDE локализиране на етикета за парола по вътрешен текст

Стъпка 3) Този път заменете вътрешния текст с „Бостън“, така че Target става „css=font:contains(„Бостън“)„. Кликнете върху „Намери“. Етикетът „Бостън до Сан Франциско“ е маркиран, което показва, че Selenium IDE може да намери дълъг етикет, дори когато е предоставена само първата дума от вътрешния му текст.

Selenium Частично съвпадение на вътрешен текст в IDE

CSS селектор срещу XPath в Selenium

Както CSS селекторите, така и XPath се използват за идентифициране на уеб елементи в Selenium, но те имат различни силни страни. Таблицата по-долу сравнява двете стратегии за локализиране по ключови измерения:

Критерии CSS селектор XPath
Скорост По-бърз, работи на родния енджин на браузъра По-бавно, особено в по-стари браузъри
Посока Само пренасочване (от родител към дете) Напред и назад (от дете към родител)
Синтаксис По-кратки и подобни на CSS правилата По-дълги, йерархични изрази за пътища
Текстово съвпадение Ограничено до псевдоклас :contains() Функции Strong text() и contains()
Най - доброто за Статични оформления и модерни уеб приложения Сложно DOM обхождане и текстово-базирани локатори

Най-добри практики за писане на CSS селектори в Selenium

Писането на надеждни CSS селектори е нещо повече от познаването на синтаксиса. Следните практики помагат на тестерите да създават стабилни, лесни за поддръжка Selenium скриптове, които оцеляват промените в потребителския интерфейс:

  1. Предпочитайте уникални атрибути: Винаги избирайте атрибутите id, data-test-id или name, които са изрично добавени за автоматизация. Те остават стабилни дори когато визуалното оформление се промени.
  2. Избягвайте прекалено вложени селектори: Дълги вериги, като например div > div > ul > li > a лесно се чупят, когато разработчиците рефакторират маркировката. Поддържайте селекторите възможно най-кратки.
  3. Използвайте частични съвпадения разумно: Модели като например [class*="btn-primary"] толерират малки промени в имената на класовете, но те могат да съвпадат и с нежелани елементи.
  4. Избягвайте локатори, базирани на индекси: Селектори като nth-child(3) са крехки, защото добавянето на братски елемент измества всяка позиция.
  5. Валидиране на селектори в DevTools: Преди стартиране на a Selenium скрипт, поставете селектора в конзолата на Chrome DevTools, като използвате document.querySelector() за да потвърди, че връща точно един елемент.
  6. Комбинирайте атрибути за уникалност: Когато даден клас се споделя от много елементи, добавете филтър за атрибути, като например input.form-control[name="email"] за да се изясни целта.
  7. Документиране и повторна употреба: Централизирайте селекторите в клас Page Object, така че една актуализация да поправя всеки тест, който препраща към един и същ елемент.

Спазването на тези указания намалява нестабилността, подобрява скоростта на изпълнение на тестовете и прави Selenium апартаментите са по-лесни за поддръжка с течение на времето.

Резюме: Бърз справочник за синтаксиса на CSS селекторите

Таблицата по-долу обединява всички Selenium Шаблон за CSS селектор, разгледан в това ръководство:

Начин на доставка Target Синтаксис Пример
Етикет и ID css=tag#id css=въвеждане#имейл
Етикет и клас css=tag.class css=input.inputtext
Етикет и атрибут css=tag[атрибут=стойност] css=вход[име=фамилия]
Етикет, клас и атрибут css=tag.class[атрибут=стойност] css=input.inputtext[tabindex=1]
Вътрешен текст css=tag:contains(„текст“) css=font:contains(“Парола:”)

Въпроси и Отговори

Да. CSS селекторите обикновено се изпълняват по-бързо от XPath, защото браузърите обработват CSS правилата нативно. Разликата е най-забележима в по-старите версии на Internet Explorer, докато съвременните браузъри като Chrome и Firefox стеснете празнината.

Да. CSS селектори, написани за Selenium IDE работи директно в Selenium WebDriver чрез By.cssSelector()Единствената разлика е, че WebDriver не изисква префикса „css=", тъй като типът локатор се определя от самия метод.

Не. Firebug беше прекратен през 2017 г., след като беше слят с Firefox Инструменти за разработчици. Днес тестерите използват вградените инструменти за разработчици в Chrome, Firefoxили Edge, за да инспектирате елементите и да валидирате CSS селекторите, преди да ги добавите към Selenium скриптове.

Да. Инструменти, задвижвани от изкуствен интелект, като например Testim, Mabl и ChatGPT могат да предложат CSS селектори чрез анализ на DOM. Те намаляват усилията за поддръжка, като адаптират селекторите, когато разработчиците преименуват класове или преструктурират страницата.

Самовъзстановяващите се двигатели, управлявани от изкуствен интелект, анализират околния DOM и автоматично се възстановяват от повредени локатори. Когато CSS селектор се повреди, двигателят идентифицира най-близкия съответстващ елемент, използвайки сходство на атрибути, текстово съдържание и исторически модели, възстановявайки стабилността на теста.

Използвайте модели за частично съвпадение, като например [id^="user_"] за префикси, [id$="_btn"] за суфикси или [id*="cart"] за поднизове. Тези модели съвпадат с динамично генерирани идентификатори, без да изискват точна стойност.

CSS селекторите не могат да преминават нагоре от дъщерен елемент към родителския му и предлагат ограничена поддръжка за съвпадение на текст. За тези сценарии XPath остава по-добрият избор. CSS също така няма вградени функции за логика на „sibling“ елементи освен съседни и общи „sibling“ елементи.

Отворете DevTools в браузъра, превключете към раздела Console и изпълнете document.querySelectorAll("your-selector")Върнатият NodeList показва всеки съответстващ елемент. Надежден Selenium Локаторът трябва да върне точно един елемент за уникално насочване.

Обобщете тази публикация с: