css_selector
Differences
This shows you the differences between two versions of the page.
|
css_selector [2018/01/04 11:23] tast |
css_selector [2024/01/12 11:14] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== CSS Selector ===== | ===== CSS Selector ===== | ||
| - | |||
| - | [[doku>wiki:dokuwiki|{{wiki:TAST-128_small.png }}]] | ||
| As said in [[Objects Identification]], the CSS Selector is simply and easy a way to identify objects in HTML (identying one or many elements) and very useful. | As said in [[Objects Identification]], the CSS Selector is simply and easy a way to identify objects in HTML (identying one or many elements) and very useful. | ||
| - | When selecting an object, in testing, it is needed to be specific, and for it, using css tends to lead to selectors such as span[name='cars'] rather than the XPath way **!!!!!! INCLUIR EL Xpath way !!!!!!!!!!!!!!** | + | When selecting an object, in testing, it is needed to be specific, and for it, using css tends to lead to selectors such as span[name='cars'] rather than the [[xpath|XPath way]] //body//div/spn/span/table/tr/tr/tr/td/td/td/td/span[@name='cars']. |
| - | //body//div/spn/span/table/tr/tr/tr/td/td/td/td/span[@name='cars']. | + | |
| Css selectors are based in defining the kind of element added to the definition of one or more attributes. It is also possible to define only the type of element (this tends to be inaccurate) or only the attributes (one or more). At the end of the page, some examples show the way to do it. | Css selectors are based in defining the kind of element added to the definition of one or more attributes. It is also possible to define only the type of element (this tends to be inaccurate) or only the attributes (one or more). At the end of the page, some examples show the way to do it. | ||
| Line 29: | Line 26: | ||
| The images below show, for instance, some different ways to identify an object: | The images below show, for instance, some different ways to identify an object: | ||
| - | {{:css selector.png?nolink&750|}} | + | {{:css selector.png?nolink&1200|}} |
| In this specific case, there is an ID. It is usually the easiest way to ensure an unique identification, so any of the following are supposed to find the element without problems: | In this specific case, there is an ID. It is usually the easiest way to ensure an unique identification, so any of the following are supposed to find the element without problems: | ||
| Line 48: | Line 45: | ||
| * input[title='Suche'][aria-label="suche"][name='q'] | * input[title='Suche'][aria-label="suche"][name='q'] | ||
| + | As a second example, in the image at the right side, there is another screenshot where can find no ID attribute for the <div> "Deutschland". This is an element that has a class "logo-subtext". The user can face two scenarios (this class represents univocally the element or not). Regarding the first scenario, some possibilities would be: | ||
| + | |||
| + | * div.logo-subtext | ||
| + | * .logo-subtext | ||
| + | * div[class='logo-subtext'] | ||
| + | * [class='logo-subtext'] | ||
| + | |||
| + | If the case is not as said before, we can join more than one attribute or condition, in order to make the identification possible. Since this element has no more attributes, the user can get advantage of the nest functionality of CSS Selector: | ||
| + | |||
| + | * #hplogo>div | ||
| + | * #hplogo>div.logo-subtext | ||
| + | * [id='hplogo']>div | ||
| + | * div[title='Google']>div[class=logo-subtext] | ||
| + | |||
| + | {{:css selector_class.png?nolink&1200|}} | ||
| + | |||
| + | As is seen in the first image, there is a possibility to get directly a CSS selector by choosing the element and seeing (not possible to copy) the code in the very right bottom of the image. If using Google Chrome, it also possible to click with the right button in the element needed and click on "Copy selector". | ||
| + | |||
| + | {{:Copy selector.png?nolink&650|}} | ||
| + | |||
| + | Further info about CSS selector can be found [[https://www.w3schools.com/cssref/css_selectors.asp|clicking here.]] | ||
css_selector.1515065016.txt.gz · Last modified: 2018/01/04 11:23 by tast
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported
