test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automation Framework #11594

subsingh-akamai · 2025-02-03T11:31:59Z

Description 📝

The objective of this proof of concept (PoC) task is to enhance the UI automation framework in Cypress by implementing centralized locators for the Linode page. This will involve:

Identifying all the locators used on the Linode page used in test cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
Creating a centralized repository or file to store these locators.
Refactoring existing Cypress test scripts to utilize the centralized locators and also did refactoring in test to use findByTestId() instead of using get().

Note - This is a new PR for #11455.

Below are guidelines which is proposed to use centralized locators

We will continue to use string directly in test for readability of test with cypress locator function like findByText(), findByTitle(), findByLabel(), findByTestId().
Wherever we use element attributes to identify elements we need to use centralized locators with cypress locator function like get()
Path - support/ui/locators
Locators should be defined as per below
- Each page will have locators file which contains locators for that page. To avoid defining all locators object at once it is better divide into specific components of page like table, empty, non-empty page.
- Locator should be written in a generic way so that it can be used in multiple tests like it should not have test specfic name and should uniquely locate element.
- common-locators.ts - it contains common locators like side and top menu
- linode-locators.ts - contains locators for (/linodes) page
To ensure consistency, we should refactor existing tests that use cy.get() to either use centralized locators or more readable locator functions like findByText(), findByTitle(), findByLabel(), or findByTestId().

Changes 🔄

As part of POC, I have updated of locators in test cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
Below 2 files are created under cypress/support/ui/locators to store locators used in above test

common-locators.ts
linode-locators.ts

How to test 🧪

yarn cy:run -s cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts

Verification steps

When test executed using this command yarn cy:run -s cypress/e2e/core/linodes/smoke-linode-landing-table.spec.tsall tests should pass successfully.

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
➕ Adding a changeset
🔐 Removing all sensitive information from the code and PR description

I have read and considered all applicable items listed above.

…nding-table.spec.ts

…cators-new

… UI Automation Framework

…//github.com/subsingh-akamai/manager into M3-8914-cypress-poc-centralized-locators-new

subsingh-akamai · 2025-02-03T11:46:21Z

Hi @bnussman and @jdamore-linode - I have created this new PR for POC of centralized locators and added you as reviewer (PR #11455).

github-actions · 2025-02-03T12:12:02Z

Coverage Report: ✅
Base Coverage: 79.24%
Current Coverage: 79.24%

coliu-akamai

thank you! confirmed tests passed ✅

jdamore-linode

Thanks Subodh! This is a nice improvement since I last looked at #11455, and I think serves as a good demonstration and starting point to explore this pattern.

I'm still not totally sold on the DX aspect of this change, namely some of the things we've already discussed in the previous PR:

I still wonder if discoverability of these locators is an issue and whether development velocity is improved or hindered as a result. My instinct is that locators could hinder test development and test troubleshooting because of the extra overhead of having to manage/find these locators and relate them to test failure messages
What problem are we solving with these that isn't solved by the ui helper objects? When should we lean for these rather than UI helpers? My instinct is that if we're using certain selectors so often throughout the tests that we feel the need to do something about it, a UI helper would be a good choice. And if we're using selectors here and there without a lot of repetition, do we really want to bother with factoring those out?

I think this is a good starting point and that we can merge this and see how it impacts DX, but I think our next steps should be to explore writing new tests using locators to see what that's like from a development and review point of view 👍

jdamore-linode · 2025-02-04T20:50:14Z

packages/manager/cypress/support/ui/locators/common-locators.ts

+// Top menu items
+export const topMenuItemsLocator = {
+  // Create Button
+  addNewMenuButton: '[data-qa-add-new-menu-button="true"]',
+  // Notifications Button
+  notificationsButton: '[aria-label="Notifications"]',
+  // Search Icon
+  searchIcon: '[data-qa-search-icon="true"]',
+  // Search Text Field
+  searchInput: '[data-qa-main-search]',
+  // Toogle side menu bar button
+  toggleSideMenuButton: '[aria-label="open menu"]',
+};


Suggested change

// Top menu items

export const topMenuItemsLocator = {

// Create Button

addNewMenuButton: '[data-qa-add-new-menu-button="true"]',

// Notifications Button

notificationsButton: '[aria-label="Notifications"]',

// Search Icon

searchIcon: '[data-qa-search-icon="true"]',

// Search Text Field

searchInput: '[data-qa-main-search]',

// Toogle side menu bar button

toggleSideMenuButton: '[aria-label="open menu"]',

};

/** Top menu items. */

export const topMenuItemsLocator = {

/** Top menu create button. */

addNewMenuButton: '[data-qa-add-new-menu-button="true"]',

/** Top menu notifications button. */

notificationsButton: '[aria-label="Notifications"]',

/** Top menu search icon. */

searchIcon: '[data-qa-search-icon="true"]',

/** Top menu search field. */

searchInput: '[data-qa-main-search]',

/** Top menu navigation toggle. */

toggleSideMenuButton: '[aria-label="open menu"]',

};

We can get a nice DX enhancement by using doc comments for these objects and properties, which might be good for discoverability:

Before After

Thank you suggessting doc comments, I have added same in this commit 793d6d6

Currently, UI helpers primarily focus on element interactions, such as buttons.ts and drawer.ts, which is great for implementing generic element interactions.

However, this POC was specifically aimed at centralizing locators to prevent defining them across multiple tests.

Ideally, test-specific DOM locators should be maintained in a centralized location to enhance reusability across tests, ultimately reducing development effort in the long run.

I completely agree that discoverability of these locators remains a challenge due to Cypress error traces.

hasyed-akamai

Thanks @subsingh-akamai !

Code Review ✅
All Test Passed ✅

linode-gh-bot · 2025-02-05T06:51:18Z

Cloud Manager UI test results

🔺 2 failing tests on test run #4 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`2 Failing`	`492 Passing`	`2 Skipped`	`111m 12s`

Details

Failing Tests
	Spec	Test
❌	`lke-create.spec.ts`	LKE Cluster Creation » can create an LKE cluster
❌	`lke-create.spec.ts`	LKE Cluster Creation with APL enabled » can create an LKE cluster with APL flag enabled

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/kubernetes/lke-create.spec.ts"

cypress · 2025-02-06T06:14:52Z

Cloud Manager E2E Run #7186

Run Properties: Failed #7186 • 03462e7fa8: test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automa...

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #7186`
Run duration	`31m 42s`
Commit	`03462e7fa8: test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automa...`
Committer	`subsingh-akamai`
View all properties for this run ↗︎

Test results
Failures	`1`
Flaky	`4`
Pending	`2`
Skipped	`0`
Passing	`499`
View all changes introduced in this branch ↗︎

Tests for review

cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts • 1 failed test

View Output Video

Test		Artifacts
linode landing checks for non-empty state with restricted user > checks restricted user with read access has no access to create linode and can see existing linodes		`Screenshots` `Video`

linodes/linode-config.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Linode Config management > End-to-End > Boots a config		`Screenshots` `Video`

stackscripts/create-stackscripts.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Create stackscripts > creates a StackScript with Any/All target image		`Screenshots` `Video`

linodes/search-linodes.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Search Linodes > create a linode and make sure it shows up in the table and is searchable in main search tool		`Screenshots` `Video`

images/create-image.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
create image (e2e) > create image from a linode		`Screenshots` `Video`

subsingh-akamai added 2 commits February 3, 2025 16:47

Added centeralised locators for test e2e/core/linodes/smoke-linode-la…

7f4458b

…nding-table.spec.ts

Merge branch 'linode:develop' into M3-8914-cypress-poc-centralized-lo…

f27da64

…cators-new

subsingh-akamai requested a review from a team as a code owner February 3, 2025 11:32

subsingh-akamai requested review from dmcintyr-akamai and removed request for a team February 3, 2025 11:32

subsingh-akamai added 2 commits February 3, 2025 17:12

Added changeset: POC: Centralized Locators for Linode Page in Cypress…

191fa9b

… UI Automation Framework

Merge branch 'M3-8914-cypress-poc-centralized-locators-new' of https:…

1594616

…//github.com/subsingh-akamai/manager into M3-8914-cypress-poc-centralized-locators-new

subsingh-akamai requested a review from a team as a code owner February 3, 2025 11:43

subsingh-akamai requested review from coliu-akamai, hasyed-akamai, bnussman-akamai and jdamore-linode and removed request for a team February 3, 2025 11:43

Removed it.only

94bbd19

bnussman-akamai approved these changes Feb 3, 2025

View reviewed changes

bnussman-akamai assigned subsingh-akamai Feb 3, 2025

bnussman-akamai added Testing Add'tl Approval Needed Waiting on another approval! labels Feb 3, 2025

coliu-akamai approved these changes Feb 4, 2025

View reviewed changes

coliu-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 4, 2025

jdamore-linode approved these changes Feb 4, 2025

View reviewed changes

Added docs comment for common-locators.ts and linode-locators.ts

793d6d6

hasyed-akamai approved these changes Feb 5, 2025

View reviewed changes

subsingh-akamai merged commit 03462e7 into linode:develop Feb 6, 2025
21 of 23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automation Framework #11594

test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automation Framework #11594

subsingh-akamai commented Feb 3, 2025 •

edited

Loading

subsingh-akamai commented Feb 3, 2025

github-actions bot commented Feb 3, 2025 •

edited

Loading

coliu-akamai left a comment

jdamore-linode left a comment

jdamore-linode Feb 4, 2025

subsingh-akamai Feb 5, 2025

subsingh-akamai Feb 5, 2025

hasyed-akamai left a comment

linode-gh-bot commented Feb 5, 2025

cypress bot commented Feb 6, 2025

test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automation Framework #11594

test: [M3-8914] - POC: Centralized Locators for Linode Page in Cypress UI Automation Framework #11594

Conversation

subsingh-akamai commented Feb 3, 2025 • edited Loading

Description 📝

Changes 🔄

How to test 🧪

Verification steps

As an Author, to speed up the review process, I considered 🤔

subsingh-akamai commented Feb 3, 2025

github-actions bot commented Feb 3, 2025 • edited Loading

coliu-akamai left a comment

Choose a reason for hiding this comment

jdamore-linode left a comment

Choose a reason for hiding this comment

jdamore-linode Feb 4, 2025

Choose a reason for hiding this comment

subsingh-akamai Feb 5, 2025

Choose a reason for hiding this comment

subsingh-akamai Feb 5, 2025

Choose a reason for hiding this comment

hasyed-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Feb 5, 2025

Cloud Manager UI test results

🔺 2 failing tests on test run #4 ↗︎

Details

Troubleshooting

cypress bot commented Feb 6, 2025

Cloud Manager E2E Run #7186

Tests for review

subsingh-akamai commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading