Skip to content

Commit

Permalink
Implement e2e testing logic with workflow (#40)
Browse files Browse the repository at this point in the history
Co-authored-by: Robin Kaggl <[email protected]>
  • Loading branch information
kaggl and Robin Kaggl authored Jan 4, 2024
1 parent a995be1 commit ed6603a
Show file tree
Hide file tree
Showing 9 changed files with 173 additions and 21 deletions.
32 changes: 32 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: Playwright Tests
on:
push:
branches: [main, master, testing]
pull_request:
branches: [main, master]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm install -g pnpm && pnpm install
- name: Install Playwright Browsers
run: pnpm exec playwright install --with-deps
- name: Build app
run: pnpm run build
env:
NUXT_PUBLIC_APP_BASE_URL: "http://localhost:3000"
NUXT_PUBLIC_REDMINE_ID: "${{ vars.NUXT_PUBLIC_REDMINE_ID }}"
- name: Run Playwright tests
run: pnpm exec playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,8 @@ dist
/public/**/image.webp

# notes
DEV_NOTES.md
DEV_NOTES.md
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
1 change: 1 addition & 0 deletions components/facet-field.vue
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ const facetsWithSelected: ComputedRef<SearchResponseFacetCountSchema<any>["count
type="checkbox"
class="ml-1 h-5 w-5 cursor-pointer"
:value="count.value"
data-testid="facetInput"
@change="$emit('facetChange', facetModel)"
/>
&nbsp;
Expand Down
4 changes: 3 additions & 1 deletion components/locale-switch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ defineProps<{
:model-value="selectedLocale"
@update:model-value="(selectedValue) => setLocale(selectedValue.code)"
>
<ListboxButton class="px-4 py-2">{{ selectedLocale.code.toUpperCase() }}</ListboxButton>
<ListboxButton class="px-4 py-2" data-testid="localeButton">
{{ selectedLocale.code.toUpperCase() }}
</ListboxButton>
<Transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 -translate-y-8 opacity-0"
Expand Down
2 changes: 2 additions & 0 deletions components/pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const t = useTranslations();
<div class="flex items-center justify-between">
<NuxtLink
v-if="page > 1"
data-testid="prevPage"
:to="{
query: {
...route.query,
Expand Down Expand Up @@ -47,6 +48,7 @@ const t = useTranslations();
<div v-else class="italic">{{ t("ui.no-results") }}</div>
<NuxtLink
v-if="page * limit < Number(all)"
data-testid="nextPage"
:to="{
query: {
...route.query,
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@acdh-oeaw/tsconfig": "^1.0.1",
"@headlessui/tailwindcss": "^0.1.3",
"@nuxt/content": "^2.9.0",
"@playwright/test": "^1.37.0",
"@playwright/test": "^1.40.0",
"@tailwindcss/typography": "^0.5.9",
"@types/lodash.get": "^4.4.7",
"@types/node": "^18.16.0",
Expand Down
78 changes: 78 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { defineConfig, devices } from "@playwright/test";

const port = 3000;
const baseUrl = `http://localhost:${port}`;

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: Boolean(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: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1: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: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
webServer: {
command: "pnpm run start",
url: baseUrl,
reuseExistingServer: !process.env.CI,
},
});
28 changes: 10 additions & 18 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 41 additions & 0 deletions tests/navigation-tests.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { expect, test } from "@playwright/test";

test("Switch locale", async ({ page }) => {
await page.goto("http://localhost:3000/de");
await page.getByTestId("localeButton").click();
await page.getByRole("option", { name: "EN" }).click();

await expect(page).toHaveTitle("Home - VieCPro");
await expect(page).toHaveURL("http://localhost:3000/en");

await page.getByTestId("localeButton").click();
await page.getByRole("option", { name: "DE" }).click();

await expect(page).toHaveTitle("Startseite - VieCPro");
await expect(page).toHaveURL("http://localhost:3000/de");
});

test("searchinterface navigation", async ({ page }) => {
await page.goto("http://localhost:3000/de/search/persons");
await page.getByTestId("nextPage").first().click();

await expect(page).toHaveURL(/.*page=2/);

await page.getByTestId("prevPage").first().click();
await expect(page).toHaveURL(/.*page=1/);

await page.getByTestId("facetInput").first().click();
await expect(page).toHaveURL(/.*&facets=.*/);

await page.getByLabel("Suche...", { exact: true }).fill("test");
await expect(page).toHaveURL(/.*&q=test/);

await page.getByRole("button", { name: "Delete Input" }).click();
await expect(page.getByLabel("Suche...", { exact: true })).toContainText("");

await page.getByRole("link", { name: "Referenzen" }).click();
await expect(page).toHaveURL("http://localhost:3000/de/search/references");

await page.getByRole("button", { name: "Filter verstecken..." }).click();
await expect(page).toHaveURL("http://localhost:3000/de/search/references");
});

0 comments on commit ed6603a

Please sign in to comment.