feat: add scope tests (#168)

## Context

This PR will add scopes to playwright for `@mobile` and `@desktop`

## Changes

- Added: tags to tests
- Added: greps to projects
- Updated: eslinter rule

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] I have tested my code for breaking changes and added the
corresponding footer in this PR if needed
- [x] I have added tests that prove my fix is effective or that my
feature works

Author: remcolakens

eslint.config.mjs

@@ -17,7 +17,7 @@ const eslintConfig = [
 	...compat.config({
 		extends: ['next/core-web-vitals', 'next/typescript'],
 		rules: {
-			'no-console': 'error',
+			'no-console': ['error', { allow: ['error'] }],
 			'react/prop-types': 'off',
 			'react/react-in-jsx-scope': 'off',
 			'@typescript-eslint/no-empty-function': 'off',

playwright.config.ts

@@ -26,26 +26,30 @@ export default defineConfig({
 	projects: [
 		{
 			name: 'chromium',
+			grep: /@desktop|@chrome|@chromium/,
 			use: { ...devices['Desktop Chrome'] },
 		},
 
 		{
 			name: 'firefox',
+			grep: /@desktop|@firefox/,
 			use: { ...devices['Desktop Firefox'] },
 		},
-
 		{
 			name: 'webkit',
+			grep: /@desktop|@webkit|@safari/,
 			use: { ...devices['Desktop Safari'] },
 		},
 		{
 			name: 'mobile webkit',
+			grep: /@mobile|@ios/,
 			use: {
 				...devices['iPhone 15'],
 			},
 		},
 		{
 			name: 'mobile chromium',
+			grep: /@mobile|@android/,
 			use: {
 				...devices['Pixel 7'],
 			},

src/e2e/homepage.spec.ts

@@ -1,7 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-test.describe('Test homepage', () => {
-	test('Verify page content', async ({ page }) => {
+test(
+	'Verify page content',
+	{
+		tag: ['@mobile', '@desktop'],
+	},
+	async ({ page }) => {
 		await page.goto('/', { waitUntil: 'domcontentloaded' });
 
 		await expect(
@@ -13,5 +17,5 @@ test.describe('Test homepage', () => {
 		).toBeVisible();
 
 		await expect(page.getByRole('img', { name: 'Next.js logo' })).toBeVisible();
-	});
-});
+	},
+);