SLVUU-49: Improve Cypress Selectors #128
Conversation
pling-scottlogic
requested review from
vferraro-scottlogic and
cfisher-scottlogic
|
|
||
| context("Screenshot", () => { | ||
| beforeEach(() => { | ||
| cy.visit(SHELL_WITH_NEW_THEME_URL); | ||
| page.visit(); | ||
| }); | ||
|
|
||
| // TODO (#VUU24): Improve test alignment with the user flow |
There was a problem hiding this comment.
Can we remove this comment now?
There was a problem hiding this comment.
Yeah we've got plenty of tickets which should cover this now.
| getSavedLayoutButton(layoutName, creator, date) { | ||
| const day = ("00" + date.getDate()).slice(-2); | ||
| const formattedDate = `${day}.${date.getMonth() + 1}.${date.getFullYear()}`; | ||
| const elementName = `${layoutName} ${creator}, ${formattedDate}`; | ||
|
|
||
| return cy.findByRole("button", { name: elementName }); | ||
| } |
There was a problem hiding this comment.
I feel like there must be a better way to do this. Suggestions welcome.
There was a problem hiding this comment.
I think here we can use formatDate from vuu-utils like such: const formattedDate = formatDate(date, "dd.mm.yyyy")
There was a problem hiding this comment.
In terms of a user point of view, I would imagine the ideal flow would be something more along the lines of what you have in getContextMenuButton. So get all layouts in my layouts -> find group x, find the one with y name or z date.
There was a problem hiding this comment.
@vferraro-scottlogic Thanks, that's exactly what I was looking for!
@cfisher-scottlogic I think that would involve a bit of refactor in the LayoutList component, but it should be doable. I'll look into it.
There was a problem hiding this comment.
It did require some refactor, but I think it was worth it: dc1810c
| getSavedLayoutButton(layoutName, creator, date) { | ||
| const day = ("00" + date.getDate()).slice(-2); | ||
| const formattedDate = `${day}.${date.getMonth() + 1}.${date.getFullYear()}`; | ||
| const elementName = `${layoutName} ${creator}, ${formattedDate}`; | ||
|
|
||
| return cy.findByRole("button", { name: elementName }); | ||
| } |
There was a problem hiding this comment.
In terms of a user point of view, I would imagine the ideal flow would be something more along the lines of what you have in getContextMenuButton. So get all layouts in my layouts -> find group x, find the one with y name or z date.
Includes refactor of LayoutList: - Extract LayoutTile from LayoutList - Nest grouped lists inside overall list - Add accessible selectors
pling-scottlogic
requested review from
vferraro-scottlogic and
cfisher-scottlogic
There was a problem hiding this comment.
I definitely didn't think you were just making these 'roles' up on the fly, and I definitely knew that they're predefined, and I definitely knew about the docs. I'm seeing this PR in a whole new light now 😅
| getSavedLayoutButton(layoutName, creator, date) { | ||
| const day = ("00" + date.getDate()).slice(-2); | ||
| const formattedDate = `${day}.${date.getMonth() + 1}.${date.getFullYear()}`; | ||
| const elementName = `${layoutName} ${creator}, ${formattedDate}`; | ||
|
|
||
| return cy.findByRole("button", { name: elementName }); | ||
| } |
|
Finos PR merged into main. |
Description
There is currently one Cypress test for the layout persistence epic, which uses brittle selectors such as CSS class names. The changes here improve the existing selectors to be more accessible and represent user interaction more accurately. We also establish a more robust testing pattern by way of the Page Object Model (POM), in which more accessible selectors are included to allow for future end-to-end testing of the layout management user journey.
Change List
Stack(aria-label)LayoutList(role)Tabstrip(role)LayoutListcomponent to match filenameTesting
Temporarily inserted all new POM methods into screenshot test to ensure selectors are working as expected.