Add E2E test of audio player (#10441)

Co-authored-by: Richard van der Hoff <[email protected]>
Co-authored-by: Michael Telatynski <[email protected]>

Author: 3 people

cypress/e2e/audio-player/audio-player.spec.ts

@@ -168,7 +168,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
             (findHighContrastTheme(this.state.theme) || isHighContrastTheme(this.state.theme))
         ) {
             return (
-                <div>
+                <div data-testid="theme-choice-panel-highcontrast">
                     <StyledCheckbox
                         checked={isHighContrastTheme(this.state.theme)}
                         onChange={(e) => this.highContrastThemeChanged(e.target.checked)}
@@ -248,7 +248,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
             <div className="mx_SettingsTab_section mx_ThemeChoicePanel">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {systemThemeSection}
-                <div className="mx_ThemeSelectors">
+                <div className="mx_ThemeSelectors" data-testid="theme-choice-panel-selectors">
                     <StyledRadioGroup
                         name="theme"
                         definitions={orderedThemes.map((t) => ({

cypress/fixtures/1sec-long-name-audio-file.ogg

@@ -12,6 +12,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
     </span>
     <div
       class="mx_ThemeSelectors"
+      data-testid="theme-choice-panel-selectors"
     >
       <label
         class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"