Setup SQLite driver E2E tests and add an E2E test for Query Monitor

Author: JanJakes

.github/workflows/end-to-end-tests.yml

@@ -0,0 +1,35 @@
+name: End-to-end Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    name: End-to-end Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Set UID and GID for PHP in WordPress images
+        run: |
+          echo "PHP_FPM_UID=$(id -u)" >> $GITHUB_ENV
+          echo "PHP_FPM_GID=$(id -g)" >> $GITHUB_ENV
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run end-to-end tests
+        run: composer run test-e2e
+
+      - name: Stop Docker containers
+        if: always()
+        run: composer run wp-test-clean

composer.json

@@ -39,6 +39,13 @@
 		"test": [
 			"phpunit"
 		],
+		"test-e2e": [
+			"@wp-test-ensure-env @no_additional_args",
+			"rm -f tests/e2e/package.json tests/e2e/node_modules @no_additional_args",
+			"ln -s ../../wordpress/package.json tests/e2e/package.json @no_additional_args",
+			"ln -s ../../wordpress/node_modules tests/e2e/node_modules @no_additional_args",
+			"npm --prefix tests/e2e run test:e2e -- --config . @additional_args"
+		],
 		"wp-setup": [
 			"./wp-setup.sh"
 		],

tests/e2e/.gitignore

@@ -0,0 +1,3 @@
+/artifacts
+/node_modules
+/package.json

tests/e2e/playwright.config.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import path from 'node:path';
+import { defineConfig } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+const baseConfig = require( '@wordpress/scripts/config/playwright.config' );
+
+process.env.WP_ARTIFACTS_PATH ??= path.join( process.cwd(), 'artifacts' );
+process.env.STORAGE_STATE_PATH ??= path.join(
+	process.env.WP_ARTIFACTS_PATH,
+	'storage-states/admin.json'
+);
+
+const config = defineConfig( {
+	...baseConfig,
+	globalSetup: require.resolve( '../../wordpress/tests/e2e/config/global-setup.js' ),
+	webServer: {
+		...baseConfig.webServer,
+		command: 'npm run env:start',
+	},
+} );
+
+export default config;

tests/e2e/specs/query-monitor-plugin.test.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Query Monitor plugin', () => {
+	async function deactivateQueryMonitor( requestUtils ) {
+		await requestUtils.deactivatePlugin( 'query-monitor' );
+		const plugin = await requestUtils.rest( {
+			path: 'wp/v2/plugins/query-monitor/query-monitor',
+		} );
+		expect( plugin.status ).toBe( 'inactive' );
+	}
+
+	test.beforeEach( async ( { requestUtils }) => {
+		await deactivateQueryMonitor( requestUtils );
+	} );
+
+	test.afterEach( async ( { requestUtils }) => {
+		await deactivateQueryMonitor( requestUtils );
+	} );
+
+	test( 'should activate', async ( { admin, page } ) => {
+		// Activate the Query Monitor plugin on the plugins page.
+		await admin.visitAdminPage( '/plugins.php' );
+		await page.getByLabel( 'Activate Query Monitor', { exact: true } ).click();
+		await page.getByText( 'Plugin activated.', { exact: true } ).waitFor();
+
+		// Click on the Query Monitor menu item in the WordPress admin bar.
+		await page.locator('a[role="menuitem"][href="#qm-overview"][aria-expanded="false"]').click();
+
+		// Wait for the Query Monitor panel to open.
+		await page.locator( '#query-monitor-main' ).waitFor();
+		await page.getByRole( 'heading', { name: 'Query Monitor', exact: true } ).waitFor();
+
+		// Click on the Database Queries tab.
+		await page.getByRole( 'tab', { name: 'Database Queries' } ).click();
+
+		// Verify the first logged query.
+		const sqlCell = page.locator( '.qm-row-sql' ).first();
+		await expect( sqlCell ).toContainText( 'SELECT option_name, option_value' );
+
+		// Check that the query is logged with SQLite information.
+		await sqlCell.getByLabel( 'Toggle SQLite queries' ).click();
+		expect( page.locator('.qm-sqlite-query', { hasText: 'SELECT `option_name` , `option_value` FROM `wp_options`' }).first() ).toBeVisible();
+	} );
+} );