diff --git a/.gitignore b/.gitignore index 51c11f9f9..1cb2f0fcc 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,7 @@ pnpm-debug.log* # macOS-specific files .DS_Store +/test-results/ +/playwright-report/ +/playwright/.cache/ +tests-examples \ No newline at end of file diff --git a/package.json b/package.json index a1081c630..e6d13a187 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "compress:jsons": "node bin/compress-jsons.cjs", "upgrade": "ncu -u", "roadmap-links": "node bin/roadmap-links.cjs", - "roadmap-content": "node bin/roadmap-content.cjs" + "roadmap-content": "node bin/roadmap-content.cjs", + "test:e2e": "playwright test" }, "dependencies": { "@astrojs/sitemap": "^1.0.0", @@ -27,6 +28,7 @@ "tailwindcss": "^3.2.4" }, "devDependencies": { + "@playwright/test": "^1.29.2", "@tailwindcss/typography": "^0.5.9", "gh-pages": "^4.0.0", "json-to-pretty-yaml": "^1.2.2", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 000000000..6b79ad7c7 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,108 @@ +import type { PlaywrightTestConfig } from '@playwright/test'; +import { devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: './tests', + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: 'http://localhost:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + + // { + // name: 'firefox', + // use: { + // ...devices['Desktop Firefox'], + // }, + // }, + + // { + // name: 'webkit', + // use: { + // ...devices['Desktop Safari'], + // }, + // }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { + // ...devices['Pixel 5'], + // }, + // }, + // { + // name: 'Mobile Safari', + // use: { + // ...devices['iPhone 12'], + // }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { + // channel: 'msedge', + // }, + // }, + // { + // name: 'Google Chrome', + // use: { + // channel: 'chrome', + // }, + // }, + ], + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'npm run dev', + url: "http://localhost:3000", + reuseExistingServer: !process.env.CI, + }, +}; + +export default config; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4547fbe5c..f43e6d400 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@astrojs/sitemap': ^1.0.0 '@astrojs/tailwind': ^2.1.3 + '@playwright/test': ^1.29.2 '@tailwindcss/typography': ^0.5.9 astro: ^1.9.2 astro-compress: ^1.1.27 @@ -28,6 +29,7 @@ dependencies: tailwindcss: 3.2.4 devDependencies: + '@playwright/test': 1.29.2 '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.4 gh-pages: 4.0.0 json-to-pretty-yaml: 1.2.2 @@ -580,6 +582,15 @@ packages: tiny-glob: 0.2.9 tslib: 2.4.1 + /@playwright/test/1.29.2: + resolution: {integrity: sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==} + engines: {node: '>=14'} + hasBin: true + dependencies: + '@types/node': 17.0.45 + playwright-core: 1.29.2 + dev: true + /@pnpm/network.ca-file/1.0.2: resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==} engines: {node: '>=12.22.0'} @@ -756,7 +767,6 @@ packages: /@types/node/17.0.45: resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} - dev: false /@types/parse5/6.0.3: resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} @@ -4228,6 +4238,12 @@ packages: dependencies: find-up: 4.1.0 + /playwright-core/1.29.2: + resolution: {integrity: sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==} + engines: {node: '>=14'} + hasBin: true + dev: true + /postcss-import/14.1.0_postcss@8.4.20: resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} diff --git a/tests/index.spec.ts b/tests/index.spec.ts new file mode 100644 index 000000000..cc014252c --- /dev/null +++ b/tests/index.spec.ts @@ -0,0 +1,7 @@ +import { test, expect } from '@playwright/test'; + +test('homepage test', async ({ page }) => { + await page.goto('/'); + + await expect(page).toHaveScreenshot({ fullPage: true }); +}); diff --git a/tests/index.spec.ts-snapshots/homepage-test-1-chromium-darwin.png b/tests/index.spec.ts-snapshots/homepage-test-1-chromium-darwin.png new file mode 100644 index 000000000..80433c855 Binary files /dev/null and b/tests/index.spec.ts-snapshots/homepage-test-1-chromium-darwin.png differ diff --git a/tests/index.spec.ts-snapshots/homepage-test-1-firefox-darwin.png b/tests/index.spec.ts-snapshots/homepage-test-1-firefox-darwin.png new file mode 100644 index 000000000..e6d0d588e Binary files /dev/null and b/tests/index.spec.ts-snapshots/homepage-test-1-firefox-darwin.png differ diff --git a/tests/index.spec.ts-snapshots/homepage-test-1-webkit-darwin.png b/tests/index.spec.ts-snapshots/homepage-test-1-webkit-darwin.png new file mode 100644 index 000000000..1a1ebd6df Binary files /dev/null and b/tests/index.spec.ts-snapshots/homepage-test-1-webkit-darwin.png differ diff --git a/tests/roadmap.spec.ts b/tests/roadmap.spec.ts new file mode 100644 index 000000000..282222c0c --- /dev/null +++ b/tests/roadmap.spec.ts @@ -0,0 +1,13 @@ +import path from 'node:path'; +import fs from 'node:fs'; +import { test, expect } from '@playwright/test'; + +const roadmapIds = fs.readdirSync(path.join(process.cwd(), 'src/roadmaps')); + +for (const roadmapId of roadmapIds) { + test(`roadmap ${roadmapId}`, async ({ page }) => { + await page.goto(`/${roadmapId}`); + + await expect(page).toHaveScreenshot({ fullPage: true }); + }); +} diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-android-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-android-1-chromium-darwin.png new file mode 100644 index 000000000..2a1b03e82 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-android-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-angular-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-angular-1-chromium-darwin.png new file mode 100644 index 000000000..fe6991b90 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-angular-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-aspnet-core-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-aspnet-core-1-chromium-darwin.png new file mode 100644 index 000000000..efcf6341f Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-aspnet-core-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-backend-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-backend-1-chromium-darwin.png new file mode 100644 index 000000000..b2f4b38f1 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-backend-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-blockchain-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-blockchain-1-chromium-darwin.png new file mode 100644 index 000000000..93214d8b7 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-blockchain-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-computer-science-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-computer-science-1-chromium-darwin.png new file mode 100644 index 000000000..3efeb2d0c Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-computer-science-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-cyber-security-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-cyber-security-1-chromium-darwin.png new file mode 100644 index 000000000..9f67e7145 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-cyber-security-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-design-system-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-design-system-1-chromium-darwin.png new file mode 100644 index 000000000..c02162883 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-design-system-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-devops-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-devops-1-chromium-darwin.png new file mode 100644 index 000000000..0119e1b0e Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-devops-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-flutter-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-flutter-1-chromium-darwin.png new file mode 100644 index 000000000..3e6fd1948 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-flutter-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-frontend-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-frontend-1-chromium-darwin.png new file mode 100644 index 000000000..f25fea5b8 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-frontend-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-golang-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-golang-1-chromium-darwin.png new file mode 100644 index 000000000..3e083aba7 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-golang-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-graphql-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-graphql-1-chromium-darwin.png new file mode 100644 index 000000000..b60858dea Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-graphql-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-java-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-java-1-chromium-darwin.png new file mode 100644 index 000000000..caf5b4c66 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-java-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-javascript-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-javascript-1-chromium-darwin.png new file mode 100644 index 000000000..a41c2b01f Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-javascript-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-nodejs-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-nodejs-1-chromium-darwin.png new file mode 100644 index 000000000..3a97fc5e3 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-nodejs-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-postgresql-dba-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-postgresql-dba-1-chromium-darwin.png new file mode 100644 index 000000000..25f15e55c Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-postgresql-dba-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-python-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-python-1-chromium-darwin.png new file mode 100644 index 000000000..5b601747e Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-python-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-qa-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-qa-1-chromium-darwin.png new file mode 100644 index 000000000..6b336570f Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-qa-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-react-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-react-1-chromium-darwin.png new file mode 100644 index 000000000..c39c30c1c Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-react-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-react-native-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-react-native-1-chromium-darwin.png new file mode 100644 index 000000000..72c6ac79c Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-react-native-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-software-architect-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-software-architect-1-chromium-darwin.png new file mode 100644 index 000000000..1aa427085 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-software-architect-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-software-design-architecture-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-software-design-architecture-1-chromium-darwin.png new file mode 100644 index 000000000..4a2c294b4 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-software-design-architecture-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-spring-boot-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-spring-boot-1-chromium-darwin.png new file mode 100644 index 000000000..bc7fd0c59 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-spring-boot-1-chromium-darwin.png differ diff --git a/tests/roadmap.spec.ts-snapshots/roadmap-vue-1-chromium-darwin.png b/tests/roadmap.spec.ts-snapshots/roadmap-vue-1-chromium-darwin.png new file mode 100644 index 000000000..1efd836a6 Binary files /dev/null and b/tests/roadmap.spec.ts-snapshots/roadmap-vue-1-chromium-darwin.png differ