run end to end tests

.github/workflows/preview.yaml

@@ -21,4 +21,28 @@ jobs:
       with:
         name: oktaco-pr-${{ github.event.number }}
         timeout: 15m
-        scope: global
+
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Run end to end tests
+      uses: okteto/test@latest
+      with:
+        tests: e2e
+        namespace: oktaco-pr-${{ github.event.number }}
+
+    - name: Save playwright report
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: e2e/playwright-report/
+        retention-days: 30
+
+    - name: Save test results
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+          name: test-results
+          path: e2e/test-results/
+          retention-days: 30

.gitignore

@@ -2,3 +2,6 @@
 !.terraform.lock.hcl
 .terraform
 kitchen/dlv
+node_modules
+test-results
+playwright-report

README.md

@@ -8,8 +8,8 @@ This is an example of how to configure and deploy a development environment that
 
 ## Run the demo application in Okteto
 
-### Prequisites:
-1. Okteto CLI 2.14 or newer
+### Prerequisites:
+1. Okteto CLI 3.0 or newer
 1. An AWS account
 1. An Okteto account ([Sign-up](https://www.okteto.com/try-free/) for 30 day, self-hosted free trial)
 1. Create a set of IAM keys for your AWS account (If you are using Okteto Self-Hosted, you can directly assign an AWS Role)
@@ -24,7 +24,7 @@ Make sure this AWS user has permissions to create, read from, and delete the fol
 - SQS Queues
 - S3 Buckets
 
-> Alternatively if you are using Okteto Self-Hosted, you can configure your instance to use an AWS role instead of using an Acess Key and Secret Access Key.
+> Alternatively if you are using Okteto Self-Hosted, you can configure your instance to use an AWS role instead of using an Access Key and Secret Access Key.
 
 Once this is configured, anyone with access to your Okteto instance will be able to deploy an development environment automatically, including the required cloud infrastructure.
 
@@ -54,6 +54,14 @@ $ okteto up kitchen
 $ okteto up check
 ```
 
+## Run the end to end tests
+
+To run the e2d tests directly in Okteto, execute the command below.
+
+```
+$ okteto test e2e
+```
+
 ## Notes
 
 This isn't an example of a properly architected perfectly designed distributed app... it's a simple

e2e/.dockerignore

@@ -0,0 +1,4 @@
+.yarn/cache
+node_modules
+playwright-report
+test-results

e2e/.oktetoignore

@@ -0,0 +1,2 @@
+.yarn/cache
+node_modules

e2e/Dockerfile

@@ -0,0 +1,3 @@
+FROM mcr.microsoft.com/playwright:v1.49.0-noble
+
+RUN corepack enable yarn

e2e/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "e2e",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "test": "playwright test"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.44.1",
+    "playwright": "^1.49.0"
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+}

e2e/playwright.config.js

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const BASE_URL = `https://menu-${process.env.OKTETO_NAMESPACE}.${process.env.OKTETO_DOMAIN}`;
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+const config = 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: !!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: [['list'], ['html', { open: 'never' }]],
+  /* 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: BASE_URL,
+
+    /* 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'] },
+    },
+  ],
+});
+
+export default config;

e2e/tests/main.spec.js

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test('environment variables are set', async () => {
+  expect(process.env.OKTETO_NAMESPACE).toBeDefined();
+  expect(process.env.OKTETO_DOMAIN).toBeDefined();
+  expect(process.env.OKTETO_NAMESPACE).not.toBe('');
+  expect(process.env.OKTETO_DOMAIN).not.toBe('');
+});
+
+
+test('menu has title', async ({ page }) => {
+  await page.goto(`https://menu-${process.env.OKTETO_NAMESPACE}.${process.env.OKTETO_DOMAIN}`);
+
+  // The page title
+  await expect(page).toHaveTitle('The Oktaco Shop');
+});
+
+test('kitchen has title', async ({ page }) => {
+  await page.goto(`https://menu-${process.env.OKTETO_NAMESPACE}.${process.env.OKTETO_DOMAIN}`);
+
+  // The page title
+  await expect(page).toHaveTitle('The Oktaco Shop');
+});
+
+test('check has title', async ({ page }) => {
+  await page.goto(`https://check-${process.env.OKTETO_NAMESPACE}.${process.env.OKTETO_DOMAIN}`);
+
+  // The page title
+  await expect(page).toHaveTitle('The Oktaco Shop - Check');
+});
+
+
+test('menu input has correct placeholder', async ({ page }) => {
+  await page.goto(`https://menu-${process.env.OKTETO_NAMESPACE}.${process.env.OKTETO_DOMAIN}`);
+
+  const menuInput = await page.locator('input#item');
+  await expect(menuInput).toBeVisible();
+  await expect(menuInput).toHaveAttribute('placeholder', 'Tacos, burritos, churros...');
+});

e2e/yarn.lock

@@ -0,0 +1,29 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.44.1":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.49.0.tgz#74227385b58317ee076b86b56d0e1e1b25cff01e"
+  integrity sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==
+  dependencies:
+    playwright "1.49.0"
+
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+[email protected]:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.0.tgz#8e69ffed3f41855b854982f3632f2922c890afcb"
+  integrity sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==
+
+[email protected], playwright@^1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.0.tgz#df6b9e05423377a99658202844a294a8afb95d0a"
+  integrity sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==
+  dependencies:
+    playwright-core "1.49.0"
+  optionalDependencies:
+    fsevents "2.3.2"

okteto.yaml

@@ -14,6 +14,9 @@ build:
   check:
     context: check
 
+  e2e:
+    context: e2e
+
 deploy:
   image: hashicorp/terraform:1.4
   commands:
@@ -125,3 +128,16 @@ dev:
     environment:
      RELOAD: true
 
+test:
+  e2e:
+    image: $OKTETO_BUILD_E2E_IMAGE
+    context: e2e
+    caches:
+      - yarn/.cache
+      - node_modules
+    commands:
+      - yarn install
+      - yarn test
+    artifacts:
+      - test-results
+      - playwright-report