First pass at CSS identifiers + test to verify they are set. For #2193

web/components/action-buttons/ActionButton/ActionButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from 'antd';
 import { FC } from 'react';
+import cn from 'classnames';
 import { ExternalAction } from '../../../interfaces/external-action';
 import styles from './ActionButton.module.scss';
 
@@ -19,7 +20,7 @@ export const ActionButton: FC<ActionButtonProps> = ({
   return (
     <Button
       type={primary ? 'primary' : 'default'}
-      className={`${styles.button}`}
+      className={cn([`${styles.button}`, 'action-button'])}
       onClick={() => externalActionSelected(action)}
       style={{ backgroundColor: color }}
     >

web/components/action-buttons/FollowButton.tsx

@@ -16,6 +16,7 @@ export const FollowButton: FC<FollowButtonProps> = ({ onClick, props }) => (
     className={styles.button}
     icon={<HeartFilled />}
     onClick={onClick}
+    id="follow-button"
   >
     Follow
   </Button>

web/components/action-buttons/NotifyButton.tsx

@@ -9,7 +9,13 @@ export type NotifyButtonProps = {
 };
 
 export const NotifyButton: FC<NotifyButtonProps> = ({ onClick, text }) => (
-  <Button type="primary" className={`${styles.button}`} icon={<BellFilled />} onClick={onClick}>
+  <Button
+    type="primary"
+    className={`${styles.button}`}
+    icon={<BellFilled />}
+    onClick={onClick}
+    id="notify-button"
+  >
     {text || 'Notify'}
   </Button>
 );

web/components/modals/FollowModal/FollowModal.tsx

@@ -74,7 +74,7 @@ export const FollowModal: FC<FollowModalProps> = ({ handleClose, account, name }
   };
 
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" id="follow-modal">
       <div className={styles.header}>
         By following this stream you'll get notified on the Fediverse when it goes live. Now is a
         great time to

web/components/ui/CustomPageContent/CustomPageContent.tsx

@@ -7,7 +7,7 @@ export type CustomPageContentProps = {
 };
 
 export const CustomPageContent: FC<CustomPageContentProps> = ({ content }) => (
-  <div className={styles.pageContentContainer}>
+  <div className={styles.pageContentContainer} id="custom-page-content">
     <div className={styles.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
   </div>
 );

web/components/ui/Footer/Footer.tsx

@@ -6,7 +6,7 @@ export type FooterProps = {
 };
 
 export const Footer: FC<FooterProps> = ({ version }) => (
-  <div className={styles.footer}>
+  <footer className={styles.footer}>
     <span>
       Powered by <a href="https://owncast.online">{version}</a>
     </span>
@@ -21,6 +21,6 @@ export const Footer: FC<FooterProps> = ({ version }) => (
         Source
       </a>
     </span>
-  </div>
+  </footer>
 );
 export default Footer;

web/components/ui/Header/Header.tsx

@@ -23,7 +23,7 @@ export const Header: FC<HeaderComponentProps> = ({
       <div id="header-logo">
         <OwncastLogo variant="contrast" />
       </div>
-      <span className="global-header-text">{name}</span>
+      <span id="global-header-text">{name}</span>
     </div>
     {chatAvailable && !chatDisabled && <UserDropdown />}
     {!chatAvailable && !chatDisabled && (

web/components/ui/Modal/Modal.tsx

@@ -71,7 +71,7 @@ export const Modal: FC<ModalProps> = ({
       centered
       destroyOnClose
     >
-      <>
+      <div id="modal-container">
         {loading && (
           <Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
         )}
@@ -79,7 +79,7 @@ export const Modal: FC<ModalProps> = ({
         {iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
         {children && <div className={styles.content}>{children}</div>}
         {loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
-      </>
+      </div>
     </AntModal>
   );
 };

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -66,7 +66,7 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
   }
 
   return (
-    <div className={styles.outerContainer}>
+    <div id="offline-banner" className={styles.outerContainer}>
       <div className={styles.innerContainer}>
         <div className={styles.header}>{streamName}</div>
         <Divider className={styles.separator} />

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -47,7 +47,7 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   }, [followers]);
 
   const noFollowers = (
-    <div className={styles.noFollowers}>
+    <div className={styles.noFollowers} id="followers-collection">
       <h2>Be the first follower!</h2>
       <p>
         {name !== 'Owncast' ? name : 'This server'} is a part of the{' '}
@@ -74,7 +74,7 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   }
 
   return (
-    <div className={styles.followers}>
+    <div className={styles.followers} id="followers-collection">
       <Row wrap gutter={[10, 10]}>
         {followers.map(follower => (
           <Col key={follower.link}>