real world app test

features/conduit.feature

@@ -0,0 +1,6 @@
+Feature: Conduit
+
+  Scenario: Sign up
+    Given Use Fake time "2021-01-01"
+    Given Go to the conduit website
+    Given User signs up

features/playwright.feature

@@ -5,6 +5,7 @@ Feature: Playwright docs
     Given Go to the playwright website
 
   Scenario: Change theme
+    Given Use Fake time "2021-01-01"
     Given A cat fact is recieved
     When Change theme to "light" mode
     # And Screen matches the base image "Light Mode"

src/steps/conduit.steps.ts

@@ -0,0 +1,22 @@
+import { ICustomWorld } from '../support/custom-world';
+import { Given, Then } from '@cucumber/cucumber';
+import { expect } from '@playwright/test';
+import { v4 } from 'uuid';
+
+Given('Go to the conduit website', async function (this: ICustomWorld) {
+  const page = this.page!;
+  await page.goto('https://demo.realworld.how');
+  await expect(page.locator('app-home-page').locator('.logo-font')).toHaveText('conduit');
+});
+
+Given('User signs up', async function (this: ICustomWorld) {
+  const page = this.page!;
+  this.username = `test-${v4().slice(0, 6)}`;
+  await page.getByText('Sign up').click();
+  await expect(page.locator('app-auth-page').locator('h1')).toHaveText('Sign up');
+  await page.getByPlaceholder('Username').fill(this.username);
+  await page.getByPlaceholder('Email').fill(`${this.username}@example.com`);
+  await page.getByPlaceholder('Password').fill('test123456');
+  await page.getByRole('button', { name: 'Sign up' }).click();
+  await expect(page.locator('app-layout-header').locator('nav')).toContainText(this.username);
+});

src/steps/general.steps.ts

@@ -1,6 +1,6 @@
 import { ICustomWorld } from '../support/custom-world';
 import { compareToBaseImage, getImagePath } from '../utils/compareImages';
-import { Then } from '@cucumber/cucumber';
+import { Given, Then } from '@cucumber/cucumber';
 
 Then('Snapshot {string}', async function (this: ICustomWorld, name: string) {
   const { page } = this;
@@ -23,3 +23,7 @@ Then('Screen matches the base image {string}', async function (this: ICustomWorl
   const screenshot = await this.page!.screenshot({});
   await compareToBaseImage(this, name, screenshot);
 });
+
+Given('Use Fake time {string}', async function (this: ICustomWorld, time: string) {
+  this.page!.clock.setFixedTime(new Date(time));
+});

src/support/custom-world.ts

@@ -17,6 +17,7 @@ export interface ICustomWorld extends World {
 
   server?: APIRequestContext;
 
+  username?: string;
   playwrightOptions?: PlaywrightTestOptions;
 }