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 { Target } from '@serenity-js/protractor';
 import { by } from 'protractor';

 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/protractor';
 import { Ensure, equals, not } from '@serenity-js/assertions';
 import { protractor, Key } from 'protractor';

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

         Enter.theValue('New username').into(UserProfile.editor),
         Press.the(Key.ENTER).in(UserProfile.editor),

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