Skip to content

Commit 138ad63

Browse files
committed
wording and formatting
1 parent 858e22b commit 138ad63

File tree

1 file changed

+24
-25
lines changed

1 file changed

+24
-25
lines changed

dusk.md

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- [Creating Browsers](#creating-browsers)
1111
- [Authentication](#authentication)
1212
- [Interacting With Elements](#interacting-with-elements)
13+
- [Dusk Selectors](#dusk-selectors)
1314
- [Clicking Links](#clicking-links)
1415
- [Text, Values, & Attributes](#text-values-and-attributes)
1516
- [Using Forms](#using-forms)
@@ -18,7 +19,6 @@
1819
- [Using The Mouse](#using-the-mouse)
1920
- [Scoping Selectors](#scoping-selectors)
2021
- [Waiting For Elements](#waiting-for-elements)
21-
- [Selector Hooks](#selector-hooks)
2222
- [Making Vue Assertions](#making-vue-assertions)
2323
- [Available Assertions](#available-assertions)
2424
- [Pages](#pages)
@@ -226,6 +226,29 @@ Often, you will be testing pages that require authentication. You can use Dusk's
226226
<a name="interacting-with-elements"></a>
227227
## Interacting With Elements
228228

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+
229252
<a name="clicking-links"></a>
230253
### Clicking Links
231254

@@ -452,30 +475,6 @@ Many of the "wait" methods in Dusk rely on the underlying `waitUsing` method. Yo
452475
return $something->isReady();
453476
}, "Something wasn't ready in time.");
454477

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-
479478
<a name="making-vue-assertions"></a>
480479
### Making Vue Assertions
481480

0 commit comments

Comments
 (0)