From 4c4771c96e8d9981a2f2d897fd687038be69d4a1 Mon Sep 17 00:00:00 2001 From: jamesfisherCOG Date: Wed, 5 Mar 2025 16:45:23 +0000 Subject: [PATCH] sprint6-locationMonitoringStationListPage-AQD-357 --- .../locationMonitoringStationListPage.js | 64 +++ test/page-objects/page.js | 13 - test/page-objects/resultsPage.js | 18 - test/specs/disambigurationPageValidation.js | 10 +- ...tionMonitoringStationListPageValidation.js | 493 ++++++++++++++++++ 5 files changed, 562 insertions(+), 36 deletions(-) create mode 100644 test/page-objects/locationMonitoringStationListPage.js delete mode 100644 test/page-objects/page.js delete mode 100644 test/page-objects/resultsPage.js create mode 100644 test/specs/locationMonitoringStationListPageValidation.js diff --git a/test/page-objects/locationMonitoringStationListPage.js b/test/page-objects/locationMonitoringStationListPage.js new file mode 100644 index 0000000..25e8ec9 --- /dev/null +++ b/test/page-objects/locationMonitoringStationListPage.js @@ -0,0 +1,64 @@ +import { $ } from '@wdio/globals' + +class LocationMonitoringStationListPage { + get getMonitoringStationListPageHeading() { + return $("h1[class*='govuk-heading-xl govuk-!-margin-bottom-6']") + } + + get getMonitoringStationListPageContent() { + return $("main[class*='govuk-main-wrapper app-main-wrapper']") + } + + get getBackLink() { + return $("a[class='govuk-back-link']") + } + + get getChangeSearchAreaLink() { + return $("a[href='/search-location']") + } + + get getMonitoringStationLink() { + return (text) => $(`//a[contains(text(),'${text}')]`) + } + + get getMonitoringStationTableHeading() { + return $("th[class='govuk-table__header govuk-!-width-one-half']") + } + + get getSiteTypeTableHeading() { + return $("th[class='govuk-table__header govuk-!-width-one-quarter']") + } + + get getPollutantsTableHeading() { + return $( + "th[class='govuk-table__header govuk-table__header--numeric govuk-!-width-one-quarter']" + ) + } + + get getParagraph() { + return $$("p[class='govuk-body']")[1] + } + + get getListItem() { + return $('li') + } + + get getList() { + return $("ul[class='govuk-list']") + } + + get getTableHeaderPadding() { + return $("tr[class='govuk-table__header']") + } + + get getTablecell1Padding() { + return $("th[class='govuk-table__cell']") + } + + get getTablecell2Padding() { + return $("td[class='govuk-table__cell govuk-table__cell--numeric']") + } +} + +// module.exports=new StartNowPage() +export default new LocationMonitoringStationListPage() diff --git a/test/page-objects/page.js b/test/page-objects/page.js deleted file mode 100644 index aa58a76..0000000 --- a/test/page-objects/page.js +++ /dev/null @@ -1,13 +0,0 @@ -import { browser, $ } from '@wdio/globals' - -class Page { - get pageHeading() { - return $('h1') - } - - open(path) { - return browser.url(path) - } -} - -export { Page } diff --git a/test/page-objects/resultsPage.js b/test/page-objects/resultsPage.js deleted file mode 100644 index 0dcac58..0000000 --- a/test/page-objects/resultsPage.js +++ /dev/null @@ -1,18 +0,0 @@ -import { $ } from '@wdio/globals' - -class ResultsPage { - get getResultsPageHeaderText() { - return $("h1[class*='govuk-heading-xl govuk-!-margin-bottom-6']") - } - - get getFirstResult() { - return $("a[href='station']") - } - - async firstLinkClick() { - await this.getFirstResult.click() - } -} - -// module.exports=new StartNowPage() -export default new ResultsPage() diff --git a/test/specs/disambigurationPageValidation.js b/test/specs/disambigurationPageValidation.js index de0f518..353f63e 100644 --- a/test/specs/disambigurationPageValidation.js +++ b/test/specs/disambigurationPageValidation.js @@ -9,8 +9,8 @@ import searchPage from '../page-objects/searchPage.js' import headersObject from '../page-objects/header.js' import footer from '../page-objects/footer.js' import disambigurationPage from '../page-objects/disambigurationPage.js' -import monitoringStationPage from '../page-objects/monitoringStationPage.js' import styling from '../page-objects/styling.js' +import locationMonitoringStationListPage from '../page-objects/locationMonitoringStationListPage.js' describe('disambiguration page tests', () => { it('content, functions, styling tests', async () => { @@ -99,7 +99,7 @@ Alternatively, try searching again` await searchPage.defaultOption.isSelected() await expect(defaultMilesOptionIsSelectedAfterSearchAgain).toBe(true) - // checking monitoring station links + // checking location links await searchPage.milesOptionClick('25 miles') await searchPage.continueBtnClick() await browser.refresh @@ -109,7 +109,7 @@ Alternatively, try searching again` const expectedURLCityOfLondon = 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/location/city-of-london_city-and-county-of-the-city-of-london' await expect(getCurrentURLCityOfLondon).toMatch(expectedURLCityOfLondon) - monitoringStationPage.getBackBtn.click() + locationMonitoringStationListPage.getBackLink.click() browser.refresh() await disambigurationPage.locationLinkClick('Little London') @@ -119,7 +119,7 @@ Alternatively, try searching again` await expect(getCurrentURLLittleLondonBucks).toMatch( expectedURLLittleLondonBucks ) - await monitoringStationPage.getBackBtn.click() + await locationMonitoringStationListPage.getBackLink.click() await browser.refresh() await disambigurationPage.locationLinkClick('London Fields') @@ -129,7 +129,7 @@ Alternatively, try searching again` await expect(getCurrentURLLondonFIeldsDudley).toMatch( expectedURLLondonFIeldsDudley ) - await monitoringStationPage.getBackBtn.click() + await locationMonitoringStationListPage.getBackLink.click() await browser.refresh() // styling tests diff --git a/test/specs/locationMonitoringStationListPageValidation.js b/test/specs/locationMonitoringStationListPageValidation.js new file mode 100644 index 0000000..37874b0 --- /dev/null +++ b/test/specs/locationMonitoringStationListPageValidation.js @@ -0,0 +1,493 @@ +import startNowPage from '../page-objects/startnowpage.js' +// import cookieBanner from '~/test/page-objects/citizens/cookieBanner.js' +import { browser, expect } from '@wdio/globals' +// import fs from 'node:fs' +// import createLogger from 'helpers/logger' +import searchPage from '../page-objects/searchPage.js' +// import resultsPage from '../page-objects/resultsPage.js' +// import monitoringStationPage from '../page-objects/monitoringStationPage.js' +import headersObject from '../page-objects/header.js' +import footer from '../page-objects/footer.js' +import disambigurationPage from '../page-objects/disambigurationPage.js' +import styling from '../page-objects/styling.js' +import locationMonitoringStationListPage from '../page-objects/locationMonitoringStationListPage.js' + +describe('monitoring station list page tests', () => { + it('content, functions, styling tests', async () => { + // await browser.deleteCookies(['airaqie_cookie']) + await browser.url('') + await browser.maximizeWindow() + // Handle the cookie banner + // if (await cookieBanner.cookieBannerDialog.isDisplayed()) { + // await cookieBanner.rejectButtonCookiesDialog.click() + // await cookieBanner.hideButtonHideDialog.click() + + // startnow-block + await startNowPage.startNowBtnClick() + + // search block + await headersObject.getHeaderOverall.isDisplayed() + await footer.getFooterOverall.isDisplayed() + await searchPage.setsearch('B2 4QA') + await searchPage.milesOptionClick('5 miles') + await searchPage.continueBtnClick() + // disambiguration page + await disambigurationPage.locationLinkClick('B2 4QA') + // monitoring station list page + // checking title + const listPageHeading = `Monitoring stations within 5 miles of B2 4QA` + const getlistPageHeading = + await locationMonitoringStationListPage.getMonitoringStationListPageHeading.getText() + await expect(getlistPageHeading).toMatch(listPageHeading) + // checking content + const listPageContent = `Monitoring stations within 5 miles of B2 4QA +Change search area +Monitoring station Site type Pollutants +Birmingham A4540 Roadside +0.9 miles away +Urban Traffic +PM10 +nitrodioxide +PM2.5 +ozone +Birmingham Ladywood +1.0 miles away +Urban Background +sulphurdioxide +PM10 +nitrodioxide +PM2.5 +ozone +Birmingham Hall Green +3.9 miles away +Urban Background +PM10 +nitrodioxide +PM2.5 +ozone +West Bromwich Kenrick Park +4.3 miles away +Urban Background +nitrodioxide +ozone +Oldbury Birmingham Road +4.8 miles away +Urban Traffic +nitrodioxide` + const getlistPageContent = + await locationMonitoringStationListPage.getMonitoringStationListPageContent.getText() + await expect(getlistPageContent).toMatch(listPageContent) + // checking back link + await locationMonitoringStationListPage.getBackLink.click() + await browser.refresh() + const getCurrentURLAfterBackLink = await browser.getUrl() + const expectedURL = + 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/multiplelocations?fullSearchQuery=B2%204QA&locationMiles=5' + await expect(getCurrentURLAfterBackLink).toMatch(expectedURL) + await disambigurationPage.locationLinkClick('B2 4QA') + + // checking change search area link + await locationMonitoringStationListPage.getChangeSearchAreaLink.click() + await browser.refresh() + const expectedURLAfterChangeSearchAreaLink = + 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/search-location' + const getURLAfterChangeSearchAreaLink = await browser.getUrl() + await expect(getURLAfterChangeSearchAreaLink).toMatch( + expectedURLAfterChangeSearchAreaLink + ) + + const expectedRetainedSearchTerm = 'B2 4QA' + const getRetainedSearchTermAfterChangeSearchArea = + await searchPage.searchBox.getValue() + await expect(getRetainedSearchTermAfterChangeSearchArea).toMatch( + expectedRetainedSearchTerm + ) + + const defaultMilesOptionIsSelectedAfterChangeSearchArea = + await searchPage.defaultOption.isSelected() + await expect(defaultMilesOptionIsSelectedAfterChangeSearchArea).toBe(true) + await searchPage.continueBtnClick() + await disambigurationPage.locationLinkClick('B2 4QA') + + // checking monitoring station links + await locationMonitoringStationListPage + .getMonitoringStationLink('Birmingham A4540 Roadside') + .click() + const getCurrentURLOfA450Roadside = await browser.getUrl() + const expectedURLOfA450Roadside = + 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/stationdetails/BirminghamA4540Roadside' + await expect(getCurrentURLOfA450Roadside).toMatch(expectedURLOfA450Roadside) + await locationMonitoringStationListPage.getBackLink.click() + browser.refresh() + + await locationMonitoringStationListPage + .getMonitoringStationLink('Birmingham Hall Green') + .click() + const getCurrentURLOfBirminghamHallGreen = await browser.getUrl() + const expectedURLOfBirminghamHallGreen = + 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/stationdetails/BirminghamHallGreen' + await expect(getCurrentURLOfBirminghamHallGreen).toMatch( + expectedURLOfBirminghamHallGreen + ) + await locationMonitoringStationListPage.getBackLink.click() + browser.refresh() + + await locationMonitoringStationListPage + .getMonitoringStationLink('Oldbury Birmingham Road') + .click() + const getCurrentURLOfOldburyBirminghamRoad = await browser.getUrl() + const expectedURLOfOldburyBirminghamRoad = + 'https://aqie-dataselector-frontend.test.cdp-int.defra.cloud/stationdetails/OldburyBirminghamRoad' + await expect(getCurrentURLOfOldburyBirminghamRoad).toMatch( + expectedURLOfOldburyBirminghamRoad + ) + await locationMonitoringStationListPage.getBackLink.click() + browser.refresh() + + // styling tests + const getMonitoringStationListPageHeading = [ + await locationMonitoringStationListPage.getMonitoringStationListPageHeading + ] + + const getMonitoringStationListPageHeadingProperties = [ + 'margin-bottom', + 'font-size', + 'line-height', + 'color', + 'font-family', + 'font-weight' + ] + + for (const element of getMonitoringStationListPageHeading) { + const styles = await styling.getStyles( + element, + getMonitoringStationListPageHeadingProperties + ) + expect(styles['margin-bottom']).toBe('30px') + expect(styles['font-size']).toBe('48px') + expect(styles['line-height']).toBe('50px') + expect(styles.color).toBe('rgb(11, 12, 12)') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles['font-weight']).toBe('700') + } + + const getMonitoringStationListPageContent = [ + await locationMonitoringStationListPage.getMonitoringStationListPageContent + ] + + const getMonitoringStationListPageContentProperties = [ + 'padding-bottom', + 'padding-top' + ] + + for (const element of getMonitoringStationListPageContent) { + const styles = await styling.getStyles( + element, + getMonitoringStationListPageContentProperties + ) + expect(styles['padding-bottom']).toBe('40px') + expect(styles['padding-top']).toBe('40px') + } + + const getBackLink = [await locationMonitoringStationListPage.getBackLink] + + const getBackLinkProperties = [ + 'color', + 'font-size', + 'line-height', + 'font-family', + 'margin-bottom', + 'margin-top', + 'padding-left', + 'text-decoration', + 'font-weight' + ] + + for (const element of getBackLink) { + const styles = await styling.getStyles(element, getBackLinkProperties) + expect(styles.color).toBe('rgb(11, 12, 12)') + expect(styles['font-size']).toBe('16px') + expect(styles['line-height']).toBe('20px') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles['margin-bottom']).toBe('15px') + expect(styles['margin-top']).toBe('15px') + expect(styles['padding-left']).toBe('14px') + expect(styles['text-decoration']).toBe( + 'underline 1px solid rgb(11, 12, 12)' + ) + expect(styles['font-weight']).toBe('400') + } + + const getChangeSearchAreaLink = [ + await locationMonitoringStationListPage.getChangeSearchAreaLink + ] + + const getChangeSearchAreaLinkProperties = [ + 'color', + 'font-family', + 'text-decoration', + 'font-size', + 'line-height', + 'font-weight' + ] + + for (const element of getChangeSearchAreaLink) { + const styles = await styling.getStyles( + element, + getChangeSearchAreaLinkProperties + ) + expect(styles.color).toBe('rgb(29, 112, 184)') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles['text-decoration']).toBe( + 'underline 1px solid rgb(29, 112, 184)' + ) + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles['font-weight']).toBe('400') + } + + const getMonitoringStationLink = [ + await locationMonitoringStationListPage.getMonitoringStationLink( + 'Birmingham A4540 Roadside' + ) + ] + + const getMonitoringStationLinkProperties = [ + 'color', + 'font-family', + 'text-decoration', + 'text-decoration-thickness', + 'font-weight', + 'text-align', + 'font-size', + 'line-height' + ] + + for (const element of getMonitoringStationLink) { + const styles = await styling.getStyles( + element, + getMonitoringStationLinkProperties + ) + expect(styles.color).toBe('rgb(29, 112, 184)') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles['text-decoration']).toBe( + 'underline 1px solid rgb(29, 112, 184)' + ) + expect(styles['text-decoration-thickness']).toBe('1px') + expect(styles['font-weight']).toBe('700') + expect(styles['text-align']).toBe('left') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + } + + const getMonitoringStationTableHeading = [ + await locationMonitoringStationListPage.getMonitoringStationTableHeading + ] + + const getMonitoringStationTableHeadingProperties = [ + 'width', + 'border-bottom', + 'padding', + 'text-align', + 'vertical-align', + 'font-weight', + 'display', + 'font-size', + 'line-height', + 'font-family' + ] + + for (const element of getMonitoringStationTableHeading) { + const styles = await styling.getStyles( + element, + getMonitoringStationTableHeadingProperties + ) + expect(styles.width).toBe('460px') + expect(styles['border-bottom']).toBe( + '0.666667px solid rgb(177, 180, 182)' + ) + expect(styles.padding).toBe('10px 20px 10px 0px') + expect(styles['text-align']).toBe('left') + expect(styles['vertical-align']).toBe('top') + expect(styles['font-weight']).toBe('700') + expect(styles.display).toBe('table-cell') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + } + + const getSiteTypeTableHeading = [ + await locationMonitoringStationListPage.getSiteTypeTableHeading + ] + + const getSiteTypeTableHeadingProperties = [ + 'width', + 'border-bottom', + 'padding', + 'text-align', + 'vertical-align', + 'font-weight', + 'display', + 'font-size', + 'line-height', + 'font-family' + ] + + for (const element of getSiteTypeTableHeading) { + const styles = await styling.getStyles( + element, + getSiteTypeTableHeadingProperties + ) + expect(styles.width).toBe('220px') + expect(styles['border-bottom']).toBe( + '0.666667px solid rgb(177, 180, 182)' + ) + expect(styles.padding).toBe('10px 20px 10px 0px') + expect(styles['text-align']).toBe('left') + expect(styles['vertical-align']).toBe('top') + expect(styles['font-weight']).toBe('700') + expect(styles.display).toBe('table-cell') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + } + + const getPollutantsTableHeading = [ + await locationMonitoringStationListPage.getPollutantsTableHeading + ] + + const getPollutantsTableHeadingProperties = [ + 'padding-right', + 'width', + 'border-bottom', + 'padding', + 'text-align', + 'vertical-align', + 'font-weight', + 'display', + 'font-size', + 'line-height', + 'font-family' + ] + + for (const element of getPollutantsTableHeading) { + const styles = await styling.getStyles( + element, + getPollutantsTableHeadingProperties + ) + expect(styles['padding-right']).toBe('0px') + expect(styles.width).toBe('240px') + expect(styles['border-bottom']).toBe( + '0.666667px solid rgb(177, 180, 182)' + ) + expect(styles.padding).toBe('10px 0px') + expect(styles['text-align']).toBe('right') + expect(styles['vertical-align']).toBe('top') + expect(styles['font-weight']).toBe('700') + expect(styles.display).toBe('table-cell') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + } + + const getParagraph = [await locationMonitoringStationListPage.getParagraph] + + const getParagraphProperties = [ + 'margin-bottom', + 'font-size', + 'line-height', + 'color', + 'font-family', + 'font-weight', + 'text-align' + ] + + for (const element of getParagraph) { + const styles = await styling.getStyles(element, getParagraphProperties) + expect(styles['margin-bottom']).toBe('20px') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles.color).toBe('rgb(11, 12, 12)') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles['font-weight']).toBe('400') + expect(styles['text-align']).toBe('left') + } + + const getListItem = [await locationMonitoringStationListPage.getListItem] + + const getListItemProperties = [ + 'margin-bottom', + 'display', + 'text-align', + 'font-size', + 'line-height', + 'font-family', + 'color', + 'font-weight' + ] + + for (const element of getListItem) { + const styles = await styling.getStyles(element, getListItemProperties) + expect(styles['margin-bottom']).toBe('5px') + expect(styles.display).toBe('list-item') + expect(styles['text-align']).toBe('right') + expect(styles['font-size']).toBe('19px') + expect(styles['line-height']).toBe('25px') + expect(styles['font-family']).toBe('"GDS Transport", arial, sans-serif') + expect(styles.color).toBe('rgb(11, 12, 12)') + expect(styles['font-weight']).toBe('400') + } + + const getList = [await locationMonitoringStationListPage.getList] + + const getListProperties = ['margin-bottom'] + + for (const element of getList) { + const styles = await styling.getStyles(element, getListProperties) + expect(styles['margin-bottom']).toBe('20px') + } + + const getTablecell1Padding = [ + await locationMonitoringStationListPage.getTablecell1Padding + ] + + const getTablecell1PaddingProperties = ['padding'] + + for (const element of getTablecell1Padding) { + const styles = await styling.getStyles( + element, + getTablecell1PaddingProperties + ) + expect(styles.padding).toBe('10px 20px 10px 0px') + } + + const getTableHeaderPadding = [ + await locationMonitoringStationListPage.getTableHeaderPadding + ] + + const getTableHeaderPaddingProperties = ['padding'] + + for (const element of getTableHeaderPadding) { + const styles = await styling.getStyles( + element, + getTableHeaderPaddingProperties + ) + expect(styles.padding).toBe('10px 20px 10px 0px') + } + + const getTablecell2Padding = [ + await locationMonitoringStationListPage.getTablecell2Padding + ] + + const getTablecell2PaddingProperties = ['padding', 'padding-right'] + + for (const element of getTablecell2Padding) { + const styles = await styling.getStyles( + element, + getTablecell2PaddingProperties + ) + expect(styles.padding).toBe('10px 0px') + expect(styles['padding-right']).toBe('0px') + } + }) +})