Use the mediaControlsButton() helper more in media tests

LayoutTests/media/media-controls.js

 var captionsButtonElement;
 var captionsButtonCoordinates;
 
 // These reflect the values used to fade in/out the media controls. Should
 // mirror the values 'fadeInDuration'/'fadeOutDuration' in MediaControlElements.cpp.
 const controlsFadeInDurationMs = 100;
 const controlsFadeOutDurationMs = 300;
 
 // The timeout for the hide-after-no-mouse-movement behavior. Defined (and
 // should mirror) the value 'timeWithoutMouseMovementBeforeHidingMediaControls'
@@ skipping 72 matching lines @@
         if (!displayElement)
             throw "There are not " + cueNumber + " text track cues visible";
     }
 
     return displayElement;
 }
 
 function testClosedCaptionsButtonVisibility(expected)
 {
     try {
-        captionsButtonElement = mediaControlsElement(internals.shadowRoot(mediaElement).firstChild, "-webkit-media-controls-toggle-closed-captions-button");
+        captionsButtonElement = mediaControlsButton(mediaElement, "toggle-closed-captions-button");
         captionsButtonCoordinates = mediaControlsButtonCoordinates(mediaElement, "toggle-closed-captions-button");
     } catch (exception) {
         consoleWrite("Failed to find a closed captions button or its coordinates: " + exception);
         if (expected)
             failTest();
         return;
     }
 
     consoleWrite("");
     if (expected == true) {
@@ skipping 24 matching lines @@
     // Compute the time it'll take until the controls will be invisible -
     // assuming playback has been started prior to invoking this
     // function. Allow 500ms slack.
     var hideTimeoutMs = controlsMouseMovementTimeoutMs + controlsFadeOutDurationMs + 500;
 
     if (!mediaElement.loop && hideTimeoutMs >= 1000 * (mediaElement.duration - mediaElement.currentTime))
         throw "The media will end before the controls have been hidden";
 
     setTimeout(func, hideTimeoutMs);
 }