DoubleClick

 <!--
     The editor shows up when the user double-clicks
     on one of the properties of their profile
     and let's them change the value of that property.
 -->
 <div id="user-profile">
     <ul>
         <li id="display-name" ondblclick="edit(this)">User12345</li>
         <li id="email-address" ondblclick="edit(this)">tester@example.org</li>
     </ul>
     <form id="editor" class="hidden">
         <input type="text" value="" />
     </form>
 </div>

 import { by, Target } from '@serenity-js/webdriverio';

 class UserProfile {
     static displayName = Target.the('display name')
         .located(by.id('display-name'));
     static emailAddress = Target.the('email address')
         .located(by.id('email-address'));
     static editor = Target.the('editor')
         .located(by.id('editor'));
 }

 import { actorCalled } from '@serenity-js/core';
 import { BrowseTheWeb, DoubleClick, isVisible, Enter, Text, Wait } from '@serenity-js/webdriverio';
 import { Ensure, equals, not } from '@serenity-js/assertions';

 actorCalled('Dorothy')
     .whoCan(BrowseTheWeb.using(browser))
     .attemptsTo(
         DoubleClick.on(UserProfile.displayName),
         Wait.until(UserProfile.editor, isVisible()),

         Enter.theValue('New username').into(UserProfile.editor),

         Ensure.that(Text.of(UserProfile.displayName), equals('New username')),
         Ensure.that(UserProfile.editor, not(isVisible()))
     );