Dusk Improvements: Vue + “Components”

Laravel Dusk has received some improvements recently thanks to contributions from Tighten’s Keith Damiani and Caleb Porzio.

Vue Assertions (By Keith Damiani)

Beginning with Dusk 2.0.6, you may now make assertions on the state of Vue component data. For example, imagine your application contains the following Vue component:

You may assert on the state of the Vue component like so:

Components (By Caleb Porzio)

Also included in the Dusk 2.0.6 release is support for “components”. Components are similar to Dusk’s “page objects”, but are intended for pieces of UI and functionality that are re-used throughout your application, such as a navigation bar or notification window. As such, components are not bound to specific URLs.

One example of a component that might exist throughout your application is a “date picker” that is present on a variety of pages. It can become cumbersome to manually write the browser automation logic to select a date in dozens of tests throughout your test suite. Instead, we can define a Dusk component to represent the date picker, allowing us to encapsulate that logic within the component:

Now, we can easily select a date within the date picker from any test. And, if the logic necessary to select a date changes, we only need to update the component:

I hope you enjoy these new features of Laravel Dusk, and be sure to thank Keith and Caleb for their great contributions!