Refactor multihop enabled tests to always start on entry tab

3 files changed, 23 insertions, 12 deletions

diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location/select-location.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location/select-location.spec.ts
index b01c5ac054..4065f08b74 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location/select-location.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location/select-location.spec.ts
@@ -58,19 +58,22 @@ test.describe('Select location', () => {
       });
     });
 
+    test.beforeEach(async () => {
+      await routes.selectLocation.getEntryButton().click();
+    });
+
     test('App should show entry selection', async () => {
-      const entryTab = page.getByText('Entry');
-      await entryTab.click();
-      await expect(entryTab).toHaveCSS('background-color', colorTokens.green);
+      const entryButton = routes.selectLocation.getEntryButton();
+      await expect(entryButton).toHaveCSS('background-color', colorTokens.green);
 
       const sweden = page.getByText('Sweden');
       await expect(sweden).toBeVisible();
     });
 
     test('App should show exit selection', async () => {
-      const exitTab = page.getByText('Exit');
-      await exitTab.click();
-      await expect(exitTab).toHaveCSS('background-color', colorTokens.green);
+      const exitButton = routes.selectLocation.getExitButton();
+      await exitButton.click();
+      await expect(exitButton).toHaveCSS('background-color', colorTokens.green);
 
       const sweden = page.getByText('Sweden');
       await expect(sweden).toBeVisible();
@@ -89,9 +92,8 @@ test.describe('Select location', () => {
         response: settings,
       });
 
-      const entryTab = page.getByText('Entry').first();
-      await entryTab.click();
-      await expect(entryTab).toHaveCSS('background-color', colorTokens.green);
+      const entryButton = routes.selectLocation.getEntryButton();
+      await expect(entryButton).toHaveCSS('background-color', colorTokens.green);
 
       const sweden = page.getByText('Sweden');
       await expect(sweden).not.toBeVisible();
@@ -110,9 +112,8 @@ test.describe('Select location', () => {
         response: settings,
       });
 
-      const entryTab = page.getByText('Entry');
-      await entryTab.click();
-      await expect(entryTab).toHaveCSS('background-color', colorTokens.green);
+      const entryButton = routes.selectLocation.getEntryButton();
+      await expect(entryButton).toHaveCSS('background-color', colorTokens.green);
 
       const sweden = page.getByText('Sweden');
       await expect(sweden).toBeVisible();
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts
index 63e03b94e2..7d29b03700 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts
@@ -20,6 +20,14 @@ export class SelectLocationRouteObjectModel {
     }
   }
 
+  getEntryButton() {
+    return this.selectors.entryButton();
+  }
+
+  getExitButton() {
+    return this.selectors.exitButton();
+  }
+
   getRelaysMatching(relayNames: string[]) {
     return this.selectors.relaysMatching(relayNames);
   }
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/selectors.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/selectors.ts
index a2c44863ae..689401ad63 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/selectors.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/selectors.ts
@@ -1,6 +1,8 @@
 import { Page } from 'playwright';
 
 export const createSelectors = (page: Page) => ({
+  entryButton: () => page.getByRole('button', { name: 'Entry' }),
+  exitButton: () => page.getByRole('button', { name: 'Exit' }),
   filterButton: () => page.getByRole('button', { name: 'Filter' }),
   filterChip: (label: string) => {
     return page.locator('button', { hasText: label });