Web UI frontend automated browser tests (#2223)

* First pass at basic browser tests for #1926

* Run tests against dev web server not go server

* Bundle the web code into the server before running tests

* Move cypress UI tests into its own npm project + add tests

* Add additional tests + wire up with cypress dashboard

* Limit concurrency of workflow jobs

* Temporarily comment out some tests that do not pass in mobile. Will fix later.

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -190,7 +190,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   );
 
   return (
-    <div className={styles.chatContainer}>
+    <div id="chat-container" className={styles.chatContainer}>
       {MessagesTable}
       {showInput && <ChatTextField />}
     </div>

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -250,6 +250,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText }) => {
       >
         <Slate editor={editor} value={defaultEditorValue}>
           <Editable
+            className="chat-text-input"
             onKeyDown={onKeyDown}
             onPaste={onPaste}
             renderElement={renderElement}

web/components/common/ContentHeader/ContentHeader.tsx

@@ -29,8 +29,8 @@ export const ContentHeader: FC<ContentHeaderProps> = ({
         <Logo src={logo} />
       </div>
       <div className={styles.titleSection}>
-        <div className={cn(styles.title, styles.row)}>{name}</div>
-        <div className={cn(styles.subtitle, styles.row)}>
+        <div className={cn(styles.title, styles.row, 'header-title')}>{name}</div>
+        <div className={cn(styles.subtitle, styles.row, 'header-subtitle')}>
           <Linkify>{title || summary}</Linkify>
         </div>
         <div className={cn(styles.tagList, styles.row)}>

web/components/common/UserDropdown/UserDropdown.tsx

@@ -81,7 +81,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
   );
 
   return (
-    <div className={`${styles.root}`}>
+    <div id="user-menu" className={`${styles.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
         <Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
           <Space>

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -57,6 +57,7 @@ export const NameChangeModal: FC = () => {
       Your chat display name is what people see when you send chat messages. Other information can
       go here to mention auth, and stuff.
       <Input
+        id="name-change-field"
         value={newName}
         onChange={e => setNewName(e.target.value)}
         placeholder="Your chat display name"
@@ -64,7 +65,7 @@ export const NameChangeModal: FC = () => {
         showCount
         defaultValue={displayName}
       />
-      <Button disabled={!saveEnabled} onClick={handleNameChange}>
+      <Button id="name-change-submit" disabled={!saveEnabled} onClick={handleNameChange}>
         Change name
       </Button>
       <div>

web/components/ui/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { Layout, Tag, Tooltip } from 'antd';
 import { FC } from 'react';
+import cn from 'classnames';
 import { UserDropdown } from '../../common/UserDropdown/UserDropdown';
 import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
 import styles from './Header.module.scss';
@@ -17,10 +18,10 @@ export const Header: FC<HeaderComponentProps> = ({
   chatAvailable,
   chatDisabled,
 }) => (
-  <AntHeader className={`${styles.header}`}>
+  <AntHeader className={cn([`${styles.header}`], 'global-header')}>
     <div className={`${styles.logo}`}>
       <OwncastLogo variant="contrast" />
-      <span>{name}</span>
+      <span className="global-header-text">{name}</span>
     </div>
     {chatAvailable && !chatDisabled && <UserDropdown />}
     {!chatAvailable && !chatDisabled && (

web/package.json

@@ -88,6 +88,7 @@
 		"chromatic": "6.11.4",
 		"css-loader": "6.7.1",
 		"eslint": "8.26.0",
+		"cypress": "^10.9.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-next": "13.0.1",
 		"eslint-config-prettier": "8.5.0",