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

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}>