As front-end code moves towards a more component-driven style (vue, react, angular), our Browser tests start to suffer the limitations of Page objects. Page objects are bound to distinct url’s, and therefore cannot be nested or used in conjunction with other Page objects. Dusk’s Component objects offer the same benefits of Page objects, while offering new and more flexible features to fit this new, emerging front-end paradigm.
Dusk components allow you to clean up visual noise in your tests by abstracting verbose testing procedures. For example, forms with many input elements can make for really noisy Dusk tests.
Weather your front-end is generated more on the backend like Blade for example, or the front-end in the case of Vue components. It is common to re-use UI components throughout your application. This is where Dusk’s Component classes really shine. They allow you to re-use selectors and custom procedures, and isolate change throughout your tests.
Component classes have an
assert method that runs when the component is loaded. This can provide helpful information for debugging when a component isn’t loading properly or doesn’t exist on the page at all.
Component classes use the
selector method to set the root CSS selector of the component. All the selectors within the component (except the
assert method) are prefixed with this scope. This allows you to write more clear and isolated selectors, and not have to worry about overlap with other components.
Unlike Page objects, Component’s can be nested ad infinitum. Parent component’s selectors, methods and scope become available to child components. This allows for interesting combinations of components to write more specific, and re-usable tests.
I send out an email every so often about cool stuff I'm working on or launching. If you dig, go ahead and sign up!