|
10 | 10 | - [Creating Browsers](#creating-browsers)
|
11 | 11 | - [Authentication](#authentication)
|
12 | 12 | - [Interacting With Elements](#interacting-with-elements)
|
| 13 | + - [Dusk Selectors](#dusk-selectors) |
13 | 14 | - [Clicking Links](#clicking-links)
|
14 | 15 | - [Text, Values, & Attributes](#text-values-and-attributes)
|
15 | 16 | - [Using Forms](#using-forms)
|
|
18 | 19 | - [Using The Mouse](#using-the-mouse)
|
19 | 20 | - [Scoping Selectors](#scoping-selectors)
|
20 | 21 | - [Waiting For Elements](#waiting-for-elements)
|
21 |
| - - [Selector Hooks](#selector-hooks) |
22 | 22 | - [Making Vue Assertions](#making-vue-assertions)
|
23 | 23 | - [Available Assertions](#available-assertions)
|
24 | 24 | - [Pages](#pages)
|
@@ -226,6 +226,29 @@ Often, you will be testing pages that require authentication. You can use Dusk's
|
226 | 226 | <a name="interacting-with-elements"></a>
|
227 | 227 | ## Interacting With Elements
|
228 | 228 |
|
| 229 | +<a name="dusk-selectors"></a> |
| 230 | +### Dusk Selectors |
| 231 | + |
| 232 | +Choosing good CSS selectors for interacting with elements is one of the hardest parts of writing Dusk tests. Over time, frontend changes can cause CSS selectors like the following to break your tests: |
| 233 | + |
| 234 | + // HTML... |
| 235 | + |
| 236 | + <button>Login</button> |
| 237 | + |
| 238 | + // Test... |
| 239 | + |
| 240 | + $browser->click('.login-page .container div > button'); |
| 241 | + |
| 242 | +Dusk selectors allow you to focus on writing effective tests rather than remembering CSS selectors. To define a selector, add a `dusk` attribute to your HTML element. Then, prefix the selector with `@` to manipulate the attached element within a Dusk test: |
| 243 | + |
| 244 | + // HTML... |
| 245 | + |
| 246 | + <button dusk="login-button">Login</button> |
| 247 | + |
| 248 | + // Test... |
| 249 | + |
| 250 | + $browser->click('@login-button'); |
| 251 | + |
229 | 252 | <a name="clicking-links"></a>
|
230 | 253 | ### Clicking Links
|
231 | 254 |
|
@@ -452,30 +475,6 @@ Many of the "wait" methods in Dusk rely on the underlying `waitUsing` method. Yo
|
452 | 475 | return $something->isReady();
|
453 | 476 | }, "Something wasn't ready in time.");
|
454 | 477 |
|
455 |
| - |
456 |
| -<a name="selector hooks"></a> |
457 |
| -### Selector Hooks |
458 |
| - |
459 |
| -Choosing good CSS Selectors for interacting with elements is one of the hardest parts of writing Dusk tests. Over time, frontend changes can cause CSS selectors like the following to break your tests: |
460 |
| - |
461 |
| - // HTML... |
462 |
| - |
463 |
| - <button>Login</button> |
464 |
| - |
465 |
| - // Test... |
466 |
| - |
467 |
| - $browser->click('.login-page .container div > button'); |
468 |
| - |
469 |
| -Selector hooks allow you to focus on writing effective tests rather than wrangling CSS selectors. To register a hook, add a `dusk` attribute to your HTML element, then prefix the hook with `@` to use it as a selector: |
470 |
| - |
471 |
| - // HTML... |
472 |
| - |
473 |
| - <button dusk="login-button">Login</button> |
474 |
| - |
475 |
| - // Test... |
476 |
| - |
477 |
| - $browser->click('@login-button'); |
478 |
| - |
479 | 478 | <a name="making-vue-assertions"></a>
|
480 | 479 | ### Making Vue Assertions
|
481 | 480 |
|
|
0 commit comments