CSS

Question 1

Выбрать атрибут, который начинается с определенного значения ‘text’

CSS

Answer 1

Символ ^ перед равно [attribute^=value]

a[href^="https"] - Selects every <a> element whose href attribute value begins with “https”’`</a>

[for^=hobbies-checkbox] при:
* hobbies-checkbox-1
* hobbies-checkbox-2
* hobbies-checkbox-3

Question 2

Атрибут href заканчивается значением .pdf

CSS

Answer 2

Символ $ перед равно - [attribute$=value]
a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf”</a>

Question 3

Атрибут содержит внутри часть текста (substring), которую мы указываем

CSS

Answer 3

Символ * перед равно - [attribute*=value]
a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools”</a>

Question 4

Выбрать первый дочерний элемент

CSS

Answer 4

:first-child
p:first-child - Selects every <p> element that is the first child of its parent

Question 5

Выбрать последний дочерний элемент родителя

CSS

Answer 5

:last-child
p:last-child - Selects every <p> element that is the last child of its parent

Пример:
browser.element('.table').all('td:last-child') - находит таблицу, в ней последний элемент каждого дочернего <td> (в данном случае - второй столбец)

Question 6

Выбрать класс

CSS

Answer 6

.class
.intro - Selects all elements with class=”intro”

Question 7

Выбрать все элементы с двумя классами

CSS

Answer 7

.class1.class2

.name1.name2 - Selects all elements with both name1 and name2 set within its class attribute

Question 8

Выбрать все элементы с именем класса class2 у которого есть родитель class1

CSS

Answer 8

.class1 .class2
.name1 .name2 - Selects all elements with name2 that is a descendant of an element with name1

Question 9

Найти элемент с локатором id

CSS

Answer 9

#id
#firstname - Selects the element with id=”firstname”

Question 10

Выбрать все элементы

CSS

Answer 10

* - Selects all elements

Question 11

Выбрать элемент (тэг)

CSS

Answer 11

element
p - Selects all <p> elements

Question 12

Выбрать все тэги с конкретным классом (все элементы с конкретным классом внутри конкретного тэга)

CSS

Answer 12

element.class
p.intro - Selects all <p> elements with class=”intro”

Question 13

Выбрать все элементы с тэгами <div> и <p>

CSS

Answer 13

element,element
div, p Selects all <div> elements and all <p> elements

Question 14

Выбрать все элементы внутри тэга <div> с тэгом <p> (с любым уровнем вложенности вглубь)

CSS

Answer 14

element element
div p - Selects all <p> elements inside <div> elements

Question 15

Выбрать все <p> элементы где <div> является родителем

CSS

Answer 15

element>element
div > p Selects all <p> elements where the parent is a <div> element

Question 16

Выбрать первый элемент <p> который идёт сразу же после <div> (на том же уровне)

CSS

Answer 16

element+element

div + p Selects the first <p> element that is placed immediately after <div> elements

Question 17

Выбрать каждый <ul> элемент которому предшествует <p>

CSS

Answer 17

element1~element2
p ~ ul - Selects every <ul> element that is preceded by a <p> element

Question 18

Выбрать все элементы с атрибутом target

CSS

Answer 18

[attribute]
[target] Selects all elements with a target attribute

Question 19

Выбрать все атрибуты где target="_blank

CSS

Answer 19

[attribute=value]
[target="_blank"] - Selects all elements with target="_blank"

Question 20

Выбрать все элементы с атрибутом title в котором содержится слово flower

CSS

Answer 20

[attribute~=value]
[title~="flower"] - Selects all elements with a title attribute containing the word “flower”

Question 21

Выбрать все элементы с атрибутом lang у которого значение равно en или начинается с en-

CSS

Answer 21

[attribute|=value]
[lang|="en"] - Selects all elements with a lang attribute value equal to “en” or starting with “en-“

Question 22

Найти каждый <p> элемент который является 2-м дочерним элементом для родительского элемента

• Родитель
  
  • Дочерний 1
  • Дочерний 2

CSS

Answer 22

:nth-child()
p:nth-child(2) - Selects every <p> element that is the second child of its parent

Является более хрупким, чем :nth-last-of-type()

Question 23

Выбрать все <p> элементы, которые являются 2-м дочерним элементом с конца

1. Parent
   
   2. Child 1
   3. Child 2
   4. …
   5. …
   6. Child 7
   7. Child 8

CSS

Answer 23

:nth-last-child()
p:nth-last-child(2) - Selects every <p> element that is the second child of its parent, counting from the last child

Question 24

Выбрать каждый элемент <p> который является вторым <p> элементом этого родителя начиная с конца

CSS

Answer 24

:nth-last-of-type()
p:nth-last-of-type(2) - Selects every <p> element that is the second <p> element of its parent, counting from the last child

Question 25

Выбрать каждый элемент <p> который является вторым дочерним <p> элементом у родителя

CSS

Answer 25

:nth-of-type()
p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent

Question 26

Выбрать элемент <p> который является единственным дочерним элементом <p> этого родителя

CSS

Answer 26

:only-of-type
p:only-of-type Selects every <p> element that is the only <p> element of its parent

Question 27

Выбрать все <p> элементы которые являются единственным дочерним у родителя

Answer 27

:only-child
p:only-child Selects every <p> element that is the only child of its parent

Question 28

Комбинация двух значений атрибутов для соблюдения семантичности. Не просто Male, a gender + Male

CSS

Answer 28

[name=gender][value=Male]

Question 29

Найти среди группы радио кнопок элемент по значению

Answer 29

browser.all('[name=gender]').element_by(have.value(gender)).click()

• Найти все радио баттоны как коллекцию.
• Найти в них значение Male
• Перейти на уровень выше
• Кликнуть

Лучше, чем [name=gender][value=Male]

Question 30

Переход на уровень выше через XPath

Answer 30

browser.element().element('..').click()