Custom Elements
Components are composed of other components. So are page objects.
The example-contact-list web component is composed of example-contact-tile web components. Both components have their own page object.
The contactList page object declares the contactTile page object as a custom element. A custom element is like a basic element, but in addition to a name and a selector, it has a type, which is a path to the page object.
The contactTile page object has its own test API, getImg(). Let's assert that every image has an alt attribute with the correct value.
Look at the contactList page object. Between the two web components, we declare a shadow. Inside the shadow is the custom element. The type property is the URI of the page object.
"type": "tutorial/contactTile"
Set "public": true to generate a getContactTiles() method.
In the test, import the root page object only.
From the root page object, call getContactTiles(). From each returned example-contact-tile element, call getImg().
To assert that each img has an alt attribute with the value Profile photo, call the basic action getAttribute().
Click Run Test.