Div Styled Multiple Elements Example - Instructions

This is a revamp of the earlier Multiple Elements Example. The functionality is the same, but instead of using Radio Buttons we’ve been more clever and used div and styled them and added code so that they act like radio buttons. Did we change anything else?

Functionality

The functionality is notionally the same as the earlier Multiple Elements Example

  • A spinner is shown when the request is submitted
  • There is a random delay in the server response time
  • A message should be shown on successful submission e.g. Successfully submitted: programmer
  • Hover over a role and see a description of the role on screen
  • Uses an internal API call to submit a role too

Impact

Explore the page and try to identify the impact.

  • Does this page respond to keyboard interaction as well as the previous page?
  • Are there any risks from changing from Radio Buttons and Buttons to Styled Divs?
  • Is the page as easy to automate?

We need to understand web technology effectively such that during the testing we go deeper than the visual representation to look at the implementation and assess the impact on various user and user interaction scenarios.