test(Playwright): Set up Playwright [WPB-17365] #19061

iskvortsov · 2025-04-30T14:29:31Z

WPB-17365 Set up automation for critical flow with Playwright

Description

Refer to the epic: https://wearezeta.atlassian.net/browse/WPB-17365

Checklist

mentions the JIRA issue in the PR name (Ex. [WPB-XXXX])
PR has been self reviewed by the author;
Hard-to-understand areas of the code have been commented;
If it is a core feature, unit tests have been added;

CLAassistant · 2025-04-30T14:29:39Z

All committers have signed the CLA.

package.json

iskvortsov · 2025-05-16T15:29:55Z

playwright.config.ts

+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */


Not sure which browsers we need, so I've commented our all except for chromium

We can decide what browsers we need, maybe we can pick those we support.
Do you think we should configure it using env var?

If you can configure it to use env var, I'd try for that; then you'd be able to set up tests using different browsers with tagging the ones which cover items important to try in other browsers

test/e2e_tests/utils/credentialsReader.ts

nkaramarko · 2025-05-16T16:22:32Z

test/e2e_tests/backend/backend.ts

+
+import {getCredentials} from '../utils/credentialsReader';
+
+const onePasswordItemName = 'BackendConnection staging-with-webapp-master';


Looks like onePasswordItemName is gonna be used a lot in various tests?
It would be great to extract it as reusable const then

Question: Does this method mean it'll prompt for 1Password interaction multiple times in a test run?

Maybe I can read it one time per test suite run and store it in some data class. Would that be ok?

Yeah and there's a few options for how to go about that, for example in Android and iOS we are creating an env file using 1Password's template capabilities

e-maad

Overall looks good, I really like the usage of page objects and data factories 🚀
Added few concerns.

e-maad · 2025-05-16T16:04:09Z

test/e2e_tests/backend/backend.ts

+  const axiosInstance = axios.create({
+    baseURL: BASE_URL,
+    withCredentials: true,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });


Can we move out this initialization?
I would prefer to initialize axiosInstance once for each test session.

Do you mean initialize BE client with axiosInstance per each test method? Or did I misunderstand your implications?

For each call you are initializing axiosInstance, you don't need a new instance for each call. You can initialize only once and then you could use it everywhere.

e-maad · 2025-05-16T16:09:19Z

test/e2e_tests/backend/backend.ts

+  const deleteResponse = await axiosInstance.request({
+    url: '/self',
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${user.token}`,
+    },
+    data: deletePayload,
+  });


Can we create a module that expose api helper functions (get, put .. etc).
Then we don't have to pass the token every time. We can also maintain the user data using singleton class.

Could you elaborate of maintaining the user data using a singleton? I thought of just using ClientUser class instances with this user data. Could be useful if we have more than one user in test case.

e-maad · 2025-05-16T16:25:25Z

test/e2e_tests/backend/clientUser.ts

+  set token(value: string) {
+    this.accessToken = value;
+  }
+}


I would prefer to have object value factories (TS friendly) for mock data:

interface User { email: string; password: string; firstName: string; lastName: string; username: string; token: string; } export const getUser = (user: Partial<User> = {}) => ({ ...user, email: user?.email ?? faker.internet.email({lastName: user?.lastName, provider: 'wire.engineering'}).toLowerCase(), password: user?.password ?? faker.internet.password({length: 8, pattern: /[A-Za-z\d!@#$]/}), firstName: user?.firstName ?? faker.person.firstName(), lastName: user?.lastName ?? faker.person.lastName(), username: user?.username ?? `${user?.lastName}${faker.string.alpha({length: 5, casing: 'lower'})}`.toLowerCase(), token: user?.token ?? null, }); const testUser1 = getUser(); const testUser2 = getUser({email: '[email protected]'});

This will be more readable.

https://medium.com/@skovy/object-factories-for-testing-in-typescript-501c8f42768e

+1. Builder or Factories for data like this tend to be a good idea long term.

Thanks, initially I have created a constructor for different cases, but I'm not sure it will be used. So I've decided not to overcomplicate things in the beginning but probably it makes sense to have it from the get go.

e-maad · 2025-05-16T16:32:56Z

test/e2e_tests/pages/login.page.ts

+    this.loginErrorText = page.locator('[data-uie-name="error-message"]');
+  }
+
+  async isEmailFieldVisible(): Promise<boolean> {


No return type needed.

Suggested change

async isEmailFieldVisible(): Promise<boolean> {

async isEmailFieldVisible() {

No return type needed.

@e-maad but it does return a boolean and this fits with the page object model design. Why wouldn't a return type be needed?

You don't need to explicitly define return type, in TS it should be auto handled based on the returned value.

test/e2e_tests/utils/credentialsReader.ts

araneforseti · 2025-05-19T07:05:09Z

playwright.config.ts

+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */


If you can configure it to use env var, I'd try for that; then you'd be able to set up tests using different browsers with tagging the ones which cover items important to try in other browsers

araneforseti · 2025-05-19T07:06:04Z

test/e2e_tests/README.md

+
+# Tests
+
+E2E tests (login.spec.ts and credentialsReader.spec.ts) can be found inside [test folder](/test/e2e_tests/). The folder contains [page objects](/test/e2e_tests/pages), [backend classes](/test/e2e_tests/backend), and [credentialsReader.ts](/test//e2e_tests/utils/credentialsReader.ts) for access 1Password credentials.


Small item: Given the e2e tests are going to grow beyond those two, should their names be removed from this item?

Sure, I've just tried to explain what was done in this PR. I'll rewrite it better! Thx for the input

araneforseti · 2025-05-19T07:07:12Z

test/e2e_tests/backend/backend.ts

+
+import {getCredentials} from '../utils/credentialsReader';
+
+const onePasswordItemName = 'BackendConnection staging-with-webapp-master';


Question: Does this method mean it'll prompt for 1Password interaction multiple times in a test run?

araneforseti · 2025-05-19T07:19:13Z

test/e2e_tests/backend/backend.ts

+    throw new Error('zuid cookie not found in register response');
+  }
+
+  // 2. Get activation code


Getting activation/verification code is something which is gonna be needed separately once we get to automating 2FA scenarios again. While not necessary for this PR, consider extracting this part

araneforseti · 2025-05-19T07:55:08Z

test/e2e_tests/backend/clientUser.ts

+  set token(value: string) {
+    this.accessToken = value;
+  }
+}


+1. Builder or Factories for data like this tend to be a good idea long term.

test/e2e_tests/credentialsReader.spec.ts

araneforseti · 2025-05-19T08:00:53Z

test/e2e_tests/pages/login.page.ts

+    this.loginErrorText = page.locator('[data-uie-name="error-message"]');
+  }
+
+  async isEmailFieldVisible(): Promise<boolean> {


No return type needed.

@e-maad but it does return a boolean and this fits with the page object model design. Why wouldn't a return type be needed?

test/e2e_tests/login.spec.ts

… to .env file from template

…r via test fixture

…b.com:wireapp/wire-webapp into feat/WPB-17365_implement_playwright_framework

araneforseti

lgtm - the new changes look very nice!

e-maad · 2025-05-26T09:31:51Z

test/e2e_tests/backend/backend.ts

+      },
+    );
+  }
+}


Great work 👏
For the future use I would be prefer to not put all the api calls in the single class.
For example:

export class UserRepository extends Backend { ... } export class AuthRepository extends Backend { ... }

Yep, that's the plan! Thank you :)

e-maad

LGTM 🚀

e-maad · 2025-05-26T09:34:18Z

test/e2e_tests/backend/user.ts

+    ...user,
+    email: user.email ?? faker.internet.email({lastName, provider: 'wire.engineering'}).toLowerCase(),
+    password: user.password ?? faker.internet.password({length: 8, pattern: /[A-Za-z\d!@#$]/}),
+    firstName,


No need for a variable.

Suggested change

firstName,

firstName: user.firstName ?? faker.person.firstName(),

sonarqubecloud · 2025-05-26T15:05:21Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

otto-the-bot added type: feature / request ✨ 👕 size: M labels Apr 30, 2025

iskvortsov assigned araneforseti and iriny Apr 30, 2025

test(Playwright): Set up Playwright [WPB-17365]

9fda508

V-Gira force-pushed the feat/WPB-17365_implement_playwright_framework branch from 5c3e71d to 9fda508 Compare April 30, 2025 15:06

V-Gira changed the title ~~feat(Playwright): WPB-17365 Initial Playwright set up~~ test(Playwright): Set up Playwright [WPB-17365] Apr 30, 2025

V-Gira reviewed Apr 30, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

iskvortsov added 3 commits May 13, 2025 11:29

Fixing Playwright version

bf3692f

Added backend related classes, login test and organized folders

5602ead

Merge branch 'dev' into feat/WPB-17365_implement_playwright_framework

d06efe3

otto-the-bot added type: test 👷 👕 size: XL and removed type: feature / request ✨ 👕 size: M labels May 16, 2025

iskvortsov commented May 16, 2025

View reviewed changes

Updated README.md in e2e_tests

8a1da37

iskvortsov marked this pull request as ready for review May 16, 2025 15:33

iskvortsov requested review from otto-the-bot and a team as code owners May 16, 2025 15:33

iskvortsov requested review from araneforseti, V-Gira, e-maad and iriny May 16, 2025 15:33

Updated usage example in README.md in e2e_tests

ad1cf52

nkaramarko requested changes May 16, 2025

View reviewed changes

e-maad reviewed May 16, 2025

View reviewed changes

test/e2e_tests/utils/credentialsReader.ts Outdated Show resolved Hide resolved

araneforseti reviewed May 19, 2025

View reviewed changes

iskvortsov added 8 commits May 21, 2025 20:46

Applied some of the PR review suggestions

1ecf811

Refactored credentialsReader.ts

8133ec1

Clean up of the page object classes

158eb35

Removed credentialsReader in favor of injecting values from 1Password…

03dd77b

… to .env file from template

Further refactoring of backend.ts

0ac6d0d

Improved Backend so that instance of BE client is create per each use…

7a52b52

…r via test fixture

Added playwright-smoke-tests git actions job

3792d7c

Merge branch 'dev' into feat/WPB-17365_implement_playwright_framework

e30bc0c

otto-the-bot added the comp: infrastructure label May 23, 2025

iskvortsov requested review from araneforseti, e-maad and nkaramarko May 23, 2025 08:47

iskvortsov added 5 commits May 23, 2025 12:09

Addressed SonarCloud issues

b425795

Fixed for empty object for SonarCloud

4c58cf3

Merge branch 'dev' into feat/WPB-17365_implement_playwright_framework

2455ec6

Small fix for the scenario, user creation and fixture

5a62204

Merge branch 'feat/WPB-17365_implement_playwright_framework' of githu…

58311a9

…b.com:wireapp/wire-webapp into feat/WPB-17365_implement_playwright_framework

araneforseti approved these changes May 26, 2025

View reviewed changes

e-maad reviewed May 26, 2025

View reviewed changes

e-maad approved these changes May 26, 2025

View reviewed changes

nkaramarko approved these changes May 26, 2025

View reviewed changes

iskvortsov added 2 commits May 26, 2025 16:07

Merge branch 'dev' into feat/WPB-17365_implement_playwright_framework

90fbdfd

Refactored User init

c1d6d9b

iskvortsov removed request for iriny, V-Gira and otto-the-bot May 26, 2025 15:36

iskvortsov merged commit 15e827e into dev May 27, 2025
13 of 14 checks passed

iskvortsov deleted the feat/WPB-17365_implement_playwright_framework branch May 27, 2025 08:00


		import {getCredentials} from '../utils/credentialsReader';

		const onePasswordItemName = 'BackendConnection staging-with-webapp-master';

	async isEmailFieldVisible(): Promise<boolean> {
	async isEmailFieldVisible() {


		# Tests

		E2E tests (login.spec.ts and credentialsReader.spec.ts) can be found inside [test folder](/test/e2e_tests/). The folder contains [page objects](/test/e2e_tests/pages), [backend classes](/test/e2e_tests/backend), and [credentialsReader.ts](/test//e2e_tests/utils/credentialsReader.ts) for access 1Password credentials.

	firstName,
	firstName: user.firstName ?? faker.person.firstName(),

test(Playwright): Set up Playwright [WPB-17365] #19061

test(Playwright): Set up Playwright [WPB-17365] #19061

Uh oh!

Conversation

iskvortsov commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

CLAassistant commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

e-maad left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

e-maad May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

araneforseti left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iskvortsov commented Apr 30, 2025 •

edited

Loading

CLAassistant commented Apr 30, 2025 •

edited

Loading

e-maad left a comment •

edited

Loading

e-maad May 16, 2025 •

edited

Loading