feat(create-echoed): create templates for Playwright's YAML

create-echoed/src/creator.ts

@@ -5,6 +5,7 @@ export const TEMPLATES = [
   "jest",
   "jest-no-otel",
   "playwright",
+  "playwright-no-otel",
   "cypress",
 ] as const;
 export type TEMPLATE = (typeof TEMPLATES)[number];

create-echoed/template/cypress/example/README.md

@@ -5,12 +5,12 @@ For instance, `cypress/e2e/example/home.cy.ts` visits http://localhost:8080, and
 
 Feel free to remove this `example` directory and `cypress/e2e/example` directory once you are ready to create your own tests.
 
-Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.
-
 ## Usage
 
 1. Start server: Move to `example` directory and start DockerCompose by `make start`.
 2. Run tests: Move to parent directory and execute `npm run test` to run Cypress with Echoed.
 3. Wait: Wait for the test to finish.
 4. View results: Open `report/result.html` to see the test results.
 5. Stop server: Move to `example` directory and stop DockerCompose by `make stop`.
+
+6. Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.

create-echoed/template/jest-no-otel/README.md

@@ -1,13 +1,13 @@
 # Echoed with Jest
 
-This template provides a minimal setup to get Echoed working with Jest without OpenTelemetry.
-The setup also creates example tests to demonstrate Echoed's behavior.
+This template provides a minimal setup to run Jest after compiling YAML to Jest tests by Echoed.
+The example demonstrates tests written in YAML and TypeScript.
 
-Feel free to remove the `example` directory and edit `.echoed.yml` once you've familiarized yourself and start crafting your own tests.
+Feel free to remove the `example` directory once you've familiarized yourself and start crafting your own tests.
 
 # How to Run Example Tests
 
-Follow these steps to run the example tests and observe Echoed in action:
+Follow these steps to run the example tests in action:
 
 1. **Setup:** Set up the necessary dependencies.
    ```sh
@@ -19,13 +19,12 @@ Follow these steps to run the example tests and observe Echoed in action:
    make start
    ```
 3. **Open Website**: Check the server is running by opening http://localhost:8080 in your browser.
-4. **Run Test:** In project's root directory, Run the tests after compiling to generate tests from yaml.
+4. **Run Test:** In project's root directory, Run the tests after compiling YAML to Jest tests.
    ```sh
    cd ../
    npm run compile && npm run test
    ```
-5. **Wait:** Allow the tests to run and complete.
-6. **Stop Server:** After testing, stop the server in the `example` directory.
+5. **Stop Server:** After testing, stop the server in the `example` directory.
    ```sh
    cd example
    make stop

create-echoed/template/jest-no-otel/example/README.md

@@ -0,0 +1,14 @@
+# What is this directory?
+
+This `example` directory serves as a reference implementation for running Echoed's tests.
+For instance, `test/manual.test.ts` makes a request to http://localhost:8080/api/cart, and it asserts that the response returns with a status code of 200.
+
+Feel free to remove this `example` directory once you are ready to create your own tests.
+
+## Usage
+
+1. Start server: Move to `example` directory and start DockerCompose by `make start`.
+2. Run tests: Move to parent directory and execute `npm run compile` to create tests from YAMLs and `npm run test` to run Jest.
+3. Stop server: Move to `example` directory and stop DockerCompose by `make stop`.
+
+Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.

create-echoed/template/jest/example/README.md

@@ -5,12 +5,12 @@ For instance, `test/manual.test.ts` makes a request to http://localhost:8080/api
 
 Feel free to remove this `example` directory once you are ready to create your own tests.
 
-Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.
-
 ## Usage
 
 1. Start server: Move to `example` directory and start DockerCompose by `make start`.
 2. Run tests: Move to parent directory and execute `npm run compile` to create tests from YAMLs and `npm run test` to run Jest with Echoed.
 3. Wait: Wait for the test to finish.
 4. View results: Open `report/result.html` to see the test results.
 5. Stop server: Move to `example` directory and stop DockerCompose by `make stop`.
+
+Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.

create-echoed/template/playwright-no-otel/.instruction/copy.json

@@ -0,0 +1,3 @@
+{
+  "from": "playwright"
+}

create-echoed/template/playwright-no-otel/README.md

@@ -0,0 +1,33 @@
+# Echoed with Playwright
+
+This template provides a minimal setup to run Playwright after compiling YAML to Playwright tests by Echoed.
+The example demonstrates tests written in YAML and TypeScript.
+
+Feel free to remove the `example` directory once you've familiarized yourself and start crafting your own tests.
+
+# How to Run Example Tests
+
+Follow these steps to run the example tests in action:
+
+1. **Setup:** Set up the necessary dependencies.
+   ```sh
+   npm install
+   npx playwright install
+   sudo npx playwright install-deps
+   ```
+2. **Start Server:** Navigate to the `example` directory and start the Dockerized server.
+   ```sh
+   cd example
+   make start
+   ```
+3. **Open Website**: Check the server is running by opening http://localhost:8080 in your browser.
+4. **Run Test:** In project's root directory, Run the tests after compiling YAML to Playwright tests.
+   ```sh
+   cd ../
+   npm run compile && npm run test
+   ```
+5. **Stop Server:** After testing, stop the server in the `example` directory.
+   ```sh
+   cd example
+   make stop
+   ```

create-echoed/template/playwright-no-otel/example/.echoed.yml

@@ -0,0 +1,15 @@
+scenario:
+  compile:
+    targets:
+      - yamlDir: example/test/scenario
+        outDir: example/test/scenario_gen
+        type: playwright
+        useEchoedFeatures: false
+    cleanOutDir: true
+    env:
+      BASE_ENDPOINT: http://localhost:8080
+    plugin:
+      commons:
+        - names:
+            - getSession
+          module: "@/example/util/session"

create-echoed/template/playwright-no-otel/example/README.md

@@ -0,0 +1,14 @@
+# What is this directory?
+
+This `example` directory serves as a reference implementation for running Echoed's tests.
+For instance, `test/scenario/home.yaml` visits http://localhost:8080, and it asserts that the page contains expected DOM elements.
+
+Feel free to remove this `example` directory once you are ready to create your own tests.
+
+## Usage
+
+1. Start server: Move to `example` directory and start DockerCompose by `make start`.
+2. Run tests: Move to parent directory and execute `npm run compile` to create tests from YAMLs and `npm run test` to run Playwright.
+3. Stop server: Move to `example` directory and stop DockerCompose by `make stop`.
+
+Note: The server utilizes a modified version of the code from [opentelemetry-demo](https://github.com/open-telemetry/opentelemetry-demo) which sends OpenTelemetry's data to `host.docker.internal:3000`, and it can be launched from DockerCompose.

create-echoed/template/playwright-no-otel/example/test/advanced.test.ts

@@ -0,0 +1,41 @@
+import { expect, test } from "@playwright/test";
+
+test("should Open page", async ({ page }) => {
+  await page.goto("http://localhost:8080/");
+  await expect(page).toHaveTitle("OTel demo");
+
+  const productList = page.locator("[data-cy=product-card]");
+  await expect(productList).toHaveCount(10);
+});
+
+test("shoud create request with context.request", async ({ context }) => {
+  const response = await context.request.get(
+    `http://localhost:8080/api/products`,
+  );
+  expect(response.status()).toBe(200);
+  expect((await response.json()).length).toEqual(10);
+});
+
+test("shoud create request with request.get", async ({ request }) => {
+  const response = await request.get(`http://localhost:8080/api/products`);
+  expect(response.status()).toBe(200);
+  expect((await response.json()).length).toEqual(10);
+});
+
+test("shoud create request with playwright.request.newContext", async ({
+  playwright,
+}) => {
+  const apiContext = await playwright.request.newContext({
+    baseURL: "http://localhost:8080",
+  });
+
+  const response = await apiContext.get(`/api/products`);
+  expect(response.status()).toBe(200);
+  expect((await response.json()).length).toEqual(10);
+});
+
+test("shoud create request with fetch", async () => {
+  const response = await fetch(`http://localhost:8080/api/products`);
+  expect(response.status).toBe(200);
+  expect((await response.json()).length).toEqual(10);
+});

create-echoed/template/playwright-no-otel/example/test/scenario/checkout.yml

@@ -0,0 +1,48 @@
+use:
+  baseURL: ${_env.BASE_ENDPOINT}
+hook:
+  beforeEach:
+    - fixtures:
+        - page
+      raw: await page.goto("/")
+scenarios:
+  - name: Checkout Flow
+    fixtures:
+      - page
+    steps:
+      - description: Add product to cart
+        arrange:
+          - await page.locator("[data-cy=product-card]").first().click()
+        act:
+          raw: await page.locator("[data-cy=product-add-to-cart]").first().click()
+        assert:
+          - expectPageToHaveURL: ${/\/cart$/}
+          - expectToContainText:
+              selector: "[data-cy=cart-item-count]"
+              expected: "1"
+      - description: Add another product to cart
+        arrange:
+          - await page.goto("/")
+          - await page.locator("[data-cy=product-card]").last().click()
+        act:
+          raw: await page.locator("[data-cy=product-add-to-cart]").click()
+        assert:
+          - expectPageToHaveURL: ${/\/cart$/}
+          - expectToContainText:
+              selector: "[data-cy=cart-item-count]"
+              expected: "2"
+      - description: Go to cart page
+        arrange:
+          - await page.locator("[data-cy=cart-icon]").click()
+        act:
+          raw: await page.locator("[data-cy=cart-go-to-shopping]").click()
+        assert:
+          - expectPageToHaveURL: ${/\/cart$/}
+      - description: Checkout
+        act:
+          raw: await page.locator("[data-cy=checkout-place-order]").click()
+        assert:
+          - expectPageToHaveURL: ${/\/checkout/}
+          - expectToHaveCount:
+              selector: "[data-cy=checkout-item]"
+              count: 2

create-echoed/template/playwright-no-otel/example/test/scenario/home.yml

@@ -0,0 +1,39 @@
+use:
+  baseURL: ${_env.BASE_ENDPOINT}
+hook:
+  beforeEach:
+    - fixtures:
+        - page
+      raw: await page.goto("/")
+scenarios:
+  - name: Validate Homepage
+    fixtures:
+      - page
+    steps:
+      - description: Check product list is shown
+        arrange:
+          - expectToBeVisible: "[data-cy=home-page]"
+        assert:
+          - expectToHaveCount:
+              selector: "[data-cy=product-list] [data-cy=product-card]"
+              count: 10
+      - description: Check session is set
+        variable:
+          session: ${await getSession(page)}
+        assert:
+          - expectToContainText:
+              selector: "[data-cy=session-id]"
+              expected: ${session.userId}
+  - name: Homepage can change currency
+    fixtures:
+      - page
+    steps:
+      - description: Change currency to EUR
+        arrange:
+          - expectToBeVisible: "[data-cy=home-page]"
+        act:
+          raw: await page.locator("[data-cy=currency-switcher]").selectOption("EUR");
+        assert:
+          - expectToContainText:
+              selector: "[data-cy=product-card]:first-child"
+              expected: "€"

create-echoed/template/playwright-no-otel/example/test/scenario/productDetail.yml

@@ -0,0 +1,49 @@
+use:
+  baseURL: ${_env.BASE_ENDPOINT}
+hook:
+  beforeEach:
+    - fixtures:
+        - page
+      raw: await page.goto("/")
+scenarios:
+  - name: Product Detail Page is valid
+    fixtures:
+      - page
+    steps:
+      - description: Product Detail Page is shown
+        act:
+          raw: await page.locator("[data-cy=product-card]").first().click()
+        assert:
+          - expectToBeVisible: "[data-cy=product-detail]"
+          - expectToBeVisible: "[data-cy=product-picture]"
+          - expectToBeVisible: "[data-cy=product-name]"
+          - expectToBeVisible: "[data-cy=product-description]"
+          - expectToBeVisible: "[data-cy=product-add-to-cart]"
+          - expectToHaveCount:
+              selector: "[data-cy=recommendation-list] [data-cy=product-card]"
+              count: 4
+          - expectToBeVisible: "[data-cy=ad]"
+  - name: Product Detail Page is working
+    fixtures:
+      - page
+    steps:
+      - description: Product Detail Page is shown
+        act:
+          raw: await page.locator("[data-cy=product-card]").first().click()
+        assert:
+          - await expect(page).toHaveURL(/\/product\//);
+      - description: Add product to cart
+        act:
+          raw: await page.locator("[data-cy=product-add-to-cart]").click()
+        assert:
+          - await expect(page).toHaveURL(/\/cart$/);
+          - expectToHaveCount:
+              selector: "[data-cy=cart-item-count]"
+              count: 1
+      - description: Cart dropdown shows the item too
+        act:
+          raw: await page.locator("[data-cy=cart-icon]").click()
+        assert:
+          - expectToHaveCount:
+              selector: "[data-cy=cart-dropdown-item]"
+              count: 1