Refactor to use "data-e2e" attributes in code to make selecting fields/buttons easier in e2e tests

This commit is contained in:
Tim Donohue
2022-01-07 15:11:12 -06:00
parent cb91ccbc33
commit 794aa33c8f
12 changed files with 94 additions and 54 deletions

View File

@@ -2,21 +2,18 @@ import { Options } from 'cypress-axe';
import { testA11y } from 'cypress/support/utils';
describe('Search Page', () => {
// unique ID of the search form (for selecting specific elements below)
const SEARCHFORM_ID = '#search-form';
it('should contain query value when navigating to page with query parameter', () => {
const queryString = 'test query';
cy.visit('/search?query=' + queryString);
cy.get(SEARCHFORM_ID + ' input[name="query"]').should('have.value', queryString);
cy.get('[data-e2e="search-box"]').should('have.value', queryString);
});
it('should redirect to the correct url when query was set and submit button was triggered', () => {
const queryString = 'Another interesting query string';
cy.visit('/search');
// Type query in searchbox & click search button
cy.get(SEARCHFORM_ID + ' input[name="query"]').type(queryString);
cy.get(SEARCHFORM_ID + ' button.search-button').click();
cy.get('[data-e2e="search-box"]').type(queryString);
cy.get('[data-e2e="search-button"]').click();
cy.url().should('include', 'query=' + encodeURI(queryString));
});
@@ -51,9 +48,8 @@ describe('Search Page', () => {
it('should pass accessibility tests in Grid view', () => {
cy.visit('/search');
// Click to display grid view
// TODO: These buttons should likely have an easier way to uniquely select
cy.get('#search-sidebar-content > ds-view-mode-switch > .btn-group > [href="/search?view=grid"] > .fas').click();
// Click button in sidebar to display grid view
cy.get('ds-search-sidebar [data-e2e="grid-view"]').click();
// <ds-search-page> tag must be loaded
cy.get('ds-search-page').should('exist');