chore(tests): clean up browser tests by splitting out federation UI tests

test/automated/browser/cypress/e2e/offline/05-offline_identifier_check.cy.js

@@ -0,0 +1,40 @@
+/*
+This test is to verify that the identifiers for specific components are
+correctly set. This is to ensure that CSS customizations can be made to the web
+UI using these specific IDs and/or class names.
+These should be documented so people know how to customize their pages.
+If you change one of these identifiers, you must update the documentation.
+*/
+
+import filterTests from '../../support/filterTests';
+
+const identifiers = [
+	'header', // The entire header component
+	'footer', // The entire footer component
+	'#global-header-text', // Just the text in the header
+	'#offline-banner', // The entire offline banner component
+	'#custom-page-content', // The entire custom page content component
+	'#notify-button', // The notify button
+];
+
+filterTests(['desktop'], () => {
+	describe(`Has correct identifiers for overrides`, () => {
+		it('Can visit the page', () => {
+			cy.visit('http://localhost:8080/');
+		});
+
+		// Loop over each identifier and verify it exists.
+		identifiers.forEach((identifier) => {
+			it(`Has identifier: ${identifier}`, () => {
+				cy.get(identifier).should('exist');
+			});
+		});
+
+		// Modal
+		const modalContainer = '#modal-container';
+		it(`Has identifier ${modalContainer}`, () => {
+			cy.contains('Notify').click();
+			cy.get(modalContainer, { timeout: 2000 }).should('be.visible');
+		});
+	});
+});