Szukam selektora CSS dla poniższej tabeli:
Peter | male | 34
Susanne | female | 12
Czy jest jakiś selektor pasujący do wszystkich niszczycieli czołgów zawierających „mężczyzna”?
css
css-selectors
jantimon
źródło
źródło
$x
odpowiada na pytanie. w przypadku pierwotnego pytania,$x("//td[text()='male']")
czy podstępOdpowiedzi:
Jeśli poprawnie odczytam specyfikację , nie.
Możesz dopasować do elementu, nazwy atrybutu w elemencie i wartości nazwanego atrybutu w elemencie. Nie widzę jednak nic dla pasujących treści w elemencie.
źródło
:empty
.Korzystanie z jQuery:
źródło
Wygląda na to, że zastanawiali się nad specyfikacją CSS3, ale nie udało się to .
:contains()
Selektor CSS3 http://www.w3.org/TR/css3-selectors/#content-selectorsźródło
Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.
I nie bez powodu naruszałoby to całą zasadę oddzielania stylu, treści, struktury i zachowania.Trzeba dodać atrybut danych do wierszy wywoływanych
data-gender
za pomocą wartościmale
lub lubfemale
użyć selektora atrybutów:HTML:
CSS:
źródło
male
lubfemale
? Fakt, żeclass
są wypełnione innymi klasami, ich kolejność nie jest gwarantowana, mogą wystąpić kolizje z innymi nazwami klas itp., Co jestclass
gorszym miejscem dla tego rodzaju rzeczy. Dedykowanydata-*
atrybut izoluje dane od wszystkich tych rzeczy i ułatwia wykonanie częściowego dopasowywania itp. Za pomocą selektorów atrybutów.Istnieje właściwie bardzo koncepcyjna podstawa, dla której nie zostało to wdrożone. Jest to połączenie zasadniczo 3 aspektów:
Te 3 razem oznaczają, że do czasu, gdy masz treść tekstową, nie możesz wrócić do elementu zawierającego i nie możesz stylizować obecnego tekstu. Jest to prawdopodobnie znaczące, ponieważ zejście pozwala jedynie na pojedyncze śledzenie parsowania kontekstu i stylu SAX. Rosnące lub inne selektory obejmujące inne osie wprowadzają potrzebę bardziej złożonych rozwiązań przejścia lub podobnych rozwiązań, które znacznie skomplikowałyby zastosowanie CSS w DOM.
źródło
text()
funkcji XPath .:contains(<sub-selector>)
wybrać elementy, które zawierają inne określone elementy. Lubiędiv:contains(div[id~="bannerAd"])
pozbyć się reklamy i jej pojemnika.Możesz ustawić zawartość jako atrybut danych, a następnie użyć selektorów atrybutów , jak pokazano tutaj:
Możesz także użyć jQuery, aby łatwo ustawić atrybuty danych:
źródło
.text()
i.textContent
są dość ciężkie, staraj się unikać ich na długich listach lub dużych tekstach, jeśli to możliwe..html()
i.innerHTML
są szybkie.$("td:contains(male)")
contenteditable='true'
- mój przypadek), nie wystarczy ustawić wartośćdata-content
atrybutu przed renderowaniem strony. Musi być stale aktualizowany. Oto, czego używam:<td onkeypress="event.target.setAttribute('data-content', event.target.textContent);">
Ponieważ CSS nie ma tej funkcji, będziesz musiał użyć JavaScript do stylizowania komórek według zawartości. Na przykład z XPath
contains
:Następnie użyj wyniku w następujący sposób:
https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/
źródło
Obawiam się, że nie jest to możliwe, ponieważ treść nie jest atrybutem ani nie jest dostępna za pośrednictwem pseudoklasy. Pełna lista selektorów CSS3 znajduje się w specyfikacji CSS3 .
źródło
Dla tych, którzy chcą wybierać tekst Selenium CSS, ten skrypt może się przydać.
Sztuką jest wybranie elementu nadrzędnego poszukiwanego elementu, a następnie wyszukanie elementu podrzędnego zawierającego tekst:
Zwróci pierwszy element, jeśli jest więcej niż jeden, ponieważ w moim przypadku zawsze jest to jeden element.
źródło
TD:contains('male')
jeśli używasz Selenium: imho użyj go tylko wtedy, gdy nie możesz zaktualizować źródła, aby dodać klasy. np. jeśli testujesz starszy kod lub Twoja firma nie pozwoli Ci porozmawiać z deweloperami (eurgh!), ponieważ twoje testy będą kruche i zepsują się, jeśli ktoś zmieni tekst późniejmasculine
lub zmieni język. Dokumenty SauceLabs pokazują użyciecontains
tutaj ( saucelabs.com/resources/articles/selenium-tips-css-selectors ) + cc @matas vaitkevicius, czy coś przeoczyłem?Zgadzam się, że atrybut danych (odpowiedź podróżnika) jest taki, jak powinien być traktowany, ALE, reguły CSS, takie jak:
często może być znacznie łatwiejsze do skonfigurowania, szczególnie w bibliotekach po stronie klienta, takich jak angularjs, które mogą być tak proste, jak:
Upewnij się, że treść jest tylko jednym słowem! Lub możesz nawet mapować na różne nazwy klas CSS za pomocą:
Dla kompletności, oto podejście do atrybutu danych:
źródło
Odpowiedź @ voyagera na temat używania
data-*
atrybutu (np.data-gender="female|male"
jest najbardziej skutecznym i zgodnym ze standardami podejściem od 2017 r .:Niemal większość celów można osiągnąć, ponieważ istnieją pewne, choć ograniczone selektory zorientowane na tekst. :: first-letter jest pseudo-element , który można zastosować ograniczoną stylizacji do pierwszej litery elementu. Istnieje również :: pierwsza linia pseudoelement poza oczywistym wybraniem pierwszego wiersza elementu (takiego jak akapit), sugeruje również, że jest oczywiste, że CSS można wykorzystać do rozszerzenia tej istniejącej możliwości na stylizowanie określonych aspektów textNode .
Dopóki takie poparcie nie odniesie sukcesu i nie zostanie wdrożone, następną najlepszą rzeczą, którą mogę zasugerować, gdy ma to zastosowanie, jest
explode
/split
słowa przy użyciu separatora spacji, wypisz każde pojedyncze słowo wewnątrzspan
elementu, a następnie, jeśli cel słowa / stylu jest przewidywalny, użyj w połączeniu z : n-tymi selektorami :W przeciwnym razie skorzystaj z odpowiedzi podróżnika na temat użycia
data-*
atrybutu. Przykład użycia PHP:źródło
Jeśli używasz Chimp / Webdriver.io , obsługują one znacznie więcej selektorów CSS niż specyfikacja CSS.
Spowoduje to na przykład kliknięcie pierwszej kotwicy zawierającej słowa „Zły niedźwiedź”:
źródło
Większość odpowiedzi tutaj stanowi alternatywę dla pisania kodu HTML w celu uwzględnienia większej ilości danych, ponieważ przynajmniej do CSS3 nie można wybrać elementu przez częściowy tekst wewnętrzny. Ale można to zrobić, wystarczy dodać trochę waniliowego JavaScript, zauważ, ponieważ kobieta zawiera również mężczyznę, zostanie wybrana:
źródło
Opcja atrybutu jest dla mnie najlepszym rozwiązaniem, jeśli nie chcesz używać javascript ani jquery.
Np. Aby stylizować wszystkie komórki tabeli słowem „gotowe”, w HTML wykonaj następujące czynności:
Następnie w css:
źródło
Możesz również używać
content
zattr()
komórkami tabeli i stylami, które są ::not
:empty
A
ZeroWidthSpace
służy do zmiany koloru i może być dodany za pomocą waniliowego JavaScript:Chociaż
<td>
znacznik końca s może zostać pominięty , może to spowodować, że będzie traktowane jako niepuste.źródło
Jeśli nie utworzysz DOM samodzielnie (np. W skrypcie użytkownika), możesz wykonać następujące czynności z czystym JS:
Wyjście konsoli
źródło
Robienie takich małych widgetów filtrujących:
źródło
Składnia tego pytania wygląda jak składnia Robot Framework. W takim przypadku, chociaż nie ma selektora css, którego można użyć, zawiera słowo kluczowe SeleniumLibrary, którego można użyć zamiast tego. Element Wait Until zawiera .
Przykład:
źródło