@@ -99,10 +99,9 @@ Here's the inspection panel for result links:
99
99
100
100
![ Inspecting the result link elements] ( images/inspect-result-links.png )
101
101
102
- Result links are ` a ` elements with the class ` result__a ` .
103
- They are under ` h2 ` elements with the class ` result__title ` .
104
- We could use the selector ` .result__title a.result__a ` to identify all result links on the page.
105
- (If you look in the DevTools search bar, you'll see that this selector locates 10 elements.)
102
+ Result links are ` a ` elements with a ` data-testid ` attribute set to ` "result-title-a" ` .
103
+ We could use the CSS selector ` a[data-testid="result-title-a"] ` to identify all result links on the page.
104
+ (If you look in the DevTools search bar, you'll see that this selector locates 12 elements.)
106
105
107
106
Since we can get all elements with one selector,
108
107
we can take the following steps to verify that search result links pertain to the phrase:
@@ -121,7 +120,7 @@ Explicit waiting will be tricky.
121
120
Add the following line to the test:
122
121
123
122
``` python
124
- page.locator(' .result__title a.result__a ' ).nth(4 ).wait_for()
123
+ page.locator(' a[data-testid="result-title-a"] ' ).nth(4 ).wait_for()
125
124
```
126
125
127
126
Let's break this down:
@@ -130,7 +129,7 @@ Let's break this down:
130
129
[ ` Locator ` ] ( https://playwright.dev/python/docs/api/class-locator ) object for the target element.
131
130
A ` Locator ` object can make many of the same calls as a page, like clicking and getting text.
132
131
However, it can also make calls for explicit waiting and calls that target multiple elements.
133
- 2 . ` .result__title a.result__a ` is the selector for the result links.
132
+ 2 . ` a[data-testid="result-title-a"] ` is the selector for the result links.
134
133
3 . ` nth(4) ` is an [ N-th element] ( https://playwright.dev/python/docs/api/class-locator#locator-nth ) fetcher.
135
134
N-th element fetchers are zero-indexed and may be appended to any selector.
136
135
In this call, it will fetch the fifth result link element.
@@ -145,7 +144,7 @@ Waiting for five links to appear should be good enough for our testing purposes.
145
144
After the links appear, we can scrape their text contents like this:
146
145
147
146
``` python
148
- titles = page.locator(' .result__title a.result__a ' ).all_text_contents()
147
+ titles = page.locator(' a[data-testid="result-title-a"] ' ).all_text_contents()
149
148
```
150
149
151
150
Again, we must use the ` locator ` method because we want to target a list of elements instead of one.
@@ -194,8 +193,8 @@ def test_basic_duckduckgo_search(page: Page) -> None:
194
193
expect(page.locator(' #search_form_input' )).to_have_value(' panda' )
195
194
196
195
# And the search result links pertain to the phrase
197
- page.locator(' .result__title a.result__a ' ).nth(4 ).wait_for()
198
- titles = page.locator(' .result__title a.result__a ' ).all_text_contents()
196
+ page.locator(' a[data-testid="result-title-a"] ' ).nth(4 ).wait_for()
197
+ titles = page.locator(' a[data-testid="result-title-a"] ' ).all_text_contents()
199
198
matches = [t for t in titles if ' panda' in t.lower()]
200
199
assert len (matches) > 0
201
200
@@ -245,8 +244,8 @@ def test_basic_duckduckgo_search(page: Page) -> None:
245
244
expect(page.locator(' #search_form_input' )).to_have_value(' panda' )
246
245
247
246
# And the search result links pertain to the phrase
248
- page.locator(' .result__title a.result__a ' ).nth(4 ).wait_for()
249
- titles = page.locator(' .result__title a.result__a ' ).all_text_contents()
247
+ page.locator(' a[data-testid="result-title-a"] ' ).nth(4 ).wait_for()
248
+ titles = page.locator(' a[data-testid="result-title-a"] ' ).all_text_contents()
250
249
matches = [t for t in titles if ' panda' in t.lower()]
251
250
assert len (matches) > 0
252
251
0 commit comments