Interaction playground 🎭

Custom components

Many sites utilize UI libraries, such as Material Designor Bootstrap, which can provide components with custom styles and behaviors. At times, these components look similar but can behave differently from standard HTML elements.

In the next challenges, you will need to interact with both the browser's native components as well as popular custom components to pass.

Standard select element

This challenge contains a standard select element with a list of animals. Use your test automation tool to select the fox option and assert that the page displays the correct message message.

Select animal:

Meow! Choose the fox to pass this challenge!

Select the fox to pass this challenge.

Custom select element

The following selection element is a custom component from the Material-UI library. Although it mimicks the behavior of a standard select element, it need to be interacted with differently. Use your test automation tool to select the color blue and assert that the page displays the correct message.

Choose a color:

Choose the color blue to pass this challenge.

Standard date picker

The following date picker is a standard HTML element. Use your test automation tool to select the date January 1, 2030 and assert that the page displays the correct message.

Select January 1, 2030 to pass this challenge.

Custom date picker

The following date picker is a custom component from the MUI X library. Although it mimicks the behavior of a standard date picker, it need to be interacted with differently. Use your test automation tool to select the date January 1, 2030 and assert that the page displays the correct message.

Try to write your test in a way that it will work regardless of the current date, which is the initial value of the date picker.

Choose a date

Select January 1, 2030 to pass this challenge.