diff --git a/projects/plugins/boost/tests/e2e/specs/jetpack-boost/critical-css.test.js b/projects/plugins/boost/tests/e2e/specs/jetpack-boost/critical-css.test.js
new file mode 100644
index 0000000000000..1b7c8db89c281
--- /dev/null
+++ b/projects/plugins/boost/tests/e2e/specs/jetpack-boost/critical-css.test.js
@@ -0,0 +1,55 @@
+import { test, expect } from '../../fixtures/base-test.js';
+import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js';
+import { JetpackBoostPage, TestContentPage } from '../../lib/pages/index.js';
+
+const testPostTitle = 'Hello World!';
+
+test.describe.serial( 'Critical CSS module', () => {
+	let page;
+
+	test.beforeAll( async ( { browser } ) => {
+		page = await browser.newPage();
+		await boostPrerequisitesBuilder( page ).withCleanEnv( true ).withConnection( true ).build();
+	} );
+
+	test( 'No Critical CSS meta information is showing on the admin when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'critical-css' ] ).build();
+		await JetpackBoostPage.visit( page );
+		expect( await page.locator( '.jb-critical-css__meta' ).isHidden() ).toBeTruthy();
+	} );
+
+	test( 'No Critical CSS is available on the frontend when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'critical-css' ] ).build();
+		await TestContentPage.visitByTitle( testPostTitle, page );
+		expect(
+			await page.locator( '#jetpack-boost-critical-css' ).count( {
+				timeout: 5 * 1000,
+			} )
+		).toBe( 0 );
+	} );
+
+	// The order of the following tests is important as we are making reuse of the generated Critical CSS which is an lengthy tasks in a test.
+	test( 'Critical CSS is being generated when the module is active', async () => {
+		await boostPrerequisitesBuilder( page ).withActiveModules( [ 'critical-css' ] ).build();
+		await JetpackBoostPage.visit( page );
+		await expect( await page.locator( 'text=Generating Critical CSS…' ) ).toBeVisible();
+		await expect( await page.locator( '.jb-critical-css__meta' ) ).toBeVisible( {
+			timeout: 2 * 60 * 1000,
+		} );
+	} );
+
+	test( 'Critical CSS meta information is showing on the admin when the module is re-activated', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'critical-css' ] ).build();
+		await boostPrerequisitesBuilder( page ).withActiveModules( [ 'critical-css' ] ).build();
+		await JetpackBoostPage.visit( page );
+		await expect( await page.locator( '.jb-critical-css__meta' ) ).toBeVisible( {
+			timeout: 2 * 60 * 1000,
+		} );
+	} );
+
+	test( 'Critical CSS is available on the frontend when the module is active', async () => {
+		await TestContentPage.visitByTitle( testPostTitle, page );
+		const criticalCss = await page.locator( '#jetpack-boost-critical-css' ).innerText();
+		expect( criticalCss.length ).toBeGreaterThan( 100 );
+	} );
+} );