Skip to content

Commit 807cf6b

Browse files
zekehuntergreenzekehuntergreen
authored
E2e tests run on various viewport sizes (#25200)
* Create breakpoints.ts import `breakpoints` from source foundations, export subset we're interested in testing * update inline-slots test to test different breakpoints * split merchandising and merchandising-high test files - test breakpoints - add duration to calls to scrollIntoView to decrease chance that layout shift will cause test to fail * update most-pop test to test different breakpoints * right slot test uses breakpoints * set cypress config numTestsKeptInMemory: 0 * update comment * simplify definition of `breakpointWidths` * fix right-slot.cy.ts
1 parent aa5dd8e commit 807cf6b

7 files changed

+93
-52
lines changed

‎cypress.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,8 @@ export default defineConfig({
1313
return require('./cypress/plugins/index.ts').default(on, config)
1414
},
1515
},
16+
// Test files like merchandising.cy.ts that take a few minutes to run exceed the memory limit
17+
// causing the browser to crash. Since we're not using snapshots at the moment, work around the
18+
// issue by not saving tests to memory. https://github.com/cypress-io/cypress/issues/1906
19+
"numTestsKeptInMemory": 0
1620
})

‎cypress/e2e/inline-slots.cy.ts

+21-16
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
import { liveblogs, articles } from '../fixtures/pages';
2+
import { breakpoints } from '../fixtures/breakpoints';
23

34
const pages = [...articles, ...liveblogs].filter(a => 'expectedMinInlineSlotsOnPage' in a);
45

56
describe('Slots and iframes load on pages', () => {
67
pages.forEach(({ path, adTest, expectedMinInlineSlotsOnPage }) => {
7-
it(`Test ${path} has at least ${expectedMinInlineSlotsOnPage} inline total slots`, () => {
8-
cy.visit(`${path}?adtest=${adTest}`);
8+
Object.entries(breakpoints).forEach(([breakpoint, width]) => {
9+
it(`Test ${path} has at least ${expectedMinInlineSlotsOnPage} inline total slots at breakpoint ${breakpoint}`, () => {
10+
cy.viewport(width, 500)
911

10-
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
11-
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
12-
13-
cy.scrollTo('bottom', { duration: 5000 });
14-
15-
[...Array(expectedMinInlineSlotsOnPage).keys()].forEach(
16-
(item, i) => {
17-
cy.get(`[data-name="inline${i + 1}"]`).should(
18-
'have.length',
19-
1,
20-
);
21-
},
22-
);
23-
});
12+
cy.visit(`${path}?adtest=${adTest}`);
13+
14+
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
15+
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
16+
17+
cy.scrollTo('bottom', { duration: 5000 });
18+
19+
[...Array(expectedMinInlineSlotsOnPage).keys()].forEach(
20+
(item, i) => {
21+
cy.get(`[data-name="inline${i + 1}"]`).should(
22+
'have.length',
23+
1,
24+
);
25+
},
26+
);
27+
});
28+
})
2429
});
2530
});

‎cypress/e2e/merchandising-high.cy.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { breakpoints } from '../fixtures/breakpoints';
2+
import { articles, liveblogs } from '../fixtures/pages';
3+
4+
describe('merchandising-high slot on pages', () => {
5+
[...articles, ...liveblogs].forEach(({ path, adTest }) => {
6+
Object.entries(breakpoints).forEach(([breakpoint, width]) => {
7+
it(`Test ${path} has correct slot and iframe at breakpoint ${breakpoint}`, () => {
8+
cy.viewport(width, 800)
9+
10+
cy.visit(`${path}?adtest=${adTest}`);
11+
12+
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
13+
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
14+
15+
// Check that the merchandising-high ad slot is on the page
16+
cy.get('#dfp-ad--merchandising-high').should('exist');
17+
18+
// creative isn't loaded unless slot is in view
19+
cy.get('#dfp-ad--merchandising-high').scrollIntoView({duration: 4000});
20+
21+
// Check that an iframe is placed inside the merchandising-high ad slot
22+
cy.get('#dfp-ad--merchandising-high')
23+
.find('iframe')
24+
.should('exist');
25+
});
26+
});
27+
});
28+
});

‎cypress/e2e/merchandising.cy.ts

+14-20
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,26 @@
1+
import { breakpoints } from '../fixtures/breakpoints';
12
import { articles, liveblogs } from '../fixtures/pages';
23

34
describe('merchandising slot on pages', () => {
45
[...articles, ...liveblogs].forEach(({ path, adTest }) => {
5-
it(`Test ${path} has correct slot and iframe`, () => {
6-
cy.visit(`${path}?adtest=${adTest}`);
6+
Object.entries(breakpoints).forEach(([breakpoint, width]) => {
7+
it(`Test ${path} has correct slot and iframe at breakpoint ${breakpoint}`, () => {
8+
cy.viewport(width, 800)
79

8-
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
9-
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
10+
cy.visit(`${path}?adtest=${adTest}`);
1011

11-
// Check that the merchandising-high ad slot is on the page
12-
cy.get('#dfp-ad--merchandising-high').should('exist');
12+
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
13+
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
1314

14-
// creative isn't loaded unless slot is in view
15-
cy.get('#dfp-ad--merchandising-high').scrollIntoView();
15+
// Check that the merchandising ad slot is on the page
16+
cy.get('#dfp-ad--merchandising').should('exist');
1617

17-
// Check that an iframe is placed inside the merchandising-high ad slot
18-
cy.get('#dfp-ad--merchandising-high')
19-
.find('iframe')
20-
.should('exist');
18+
// creative isn't loaded unless slot is in view
19+
cy.get('#dfp-ad--merchandising').scrollIntoView({duration: 4000});
2120

22-
// Check that the merchandising ad slot is on the page
23-
cy.get('#dfp-ad--merchandising').should('exist');
24-
25-
// creative isn't loaded unless slot is in view
26-
cy.get('#dfp-ad--merchandising').scrollIntoView();
27-
28-
// Check that an iframe is placed inside the merchandising ad slot
29-
cy.get('#dfp-ad--merchandising').find('iframe').should('exist');
21+
// Check that an iframe is placed inside the merchandising ad slot
22+
cy.get('#dfp-ad--merchandising').find('iframe', {timeout: 10000}).should('exist');
23+
});
3024
});
3125
});
3226
});

‎cypress/e2e/mostpop.cy.ts

+17-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1+
import { breakpoints } from '../fixtures/breakpoints';
12
import { articles, liveblogs } from '../fixtures/pages';
23

34
describe('mostpop slot on pages', () => {
45
[...articles, ...liveblogs].forEach(({ path, adTest }) => {
5-
it(`Test ${path} has correct slot and iframe`, () => {
6-
cy.visit(`${path}?adtest=${adTest}`);
7-
8-
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
9-
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
10-
11-
// Check that the mostpop ad slot is on the page
12-
cy.get('#dfp-ad--mostpop').should('exist');
13-
14-
// creative isn't loaded unless slot is in view
15-
cy.get('#dfp-ad--mostpop').scrollIntoView();
16-
17-
// Check that an iframe is placed inside the ad slot
18-
cy.get('#dfp-ad--mostpop').find('iframe').should('exist');
6+
Object.entries(breakpoints).forEach(([breakpoint, width]) => {
7+
it(`Test ${path} has correct slot and iframe at breakpoint ${breakpoint}`, () => {
8+
cy.visit(`${path}?adtest=${adTest}`);
9+
10+
// Click "Yes, I'm happy" on the sourcepoint banner to obtain consent
11+
cy.getIframeBody('sp_message_iframe_').find('.btn-primary').click();
12+
13+
// Check that the mostpop ad slot is on the page
14+
cy.get('#dfp-ad--mostpop').should('exist');
15+
16+
// creative isn't loaded unless slot is in view
17+
cy.get('#dfp-ad--mostpop').scrollIntoView();
18+
19+
// Check that an iframe is placed inside the ad slot
20+
cy.get('#dfp-ad--mostpop').find('iframe').should('exist');
21+
});
1922
});
2023
});
2124
});

‎cypress/e2e/right-slot.cy.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { breakpoints } from '@guardian/source-foundations';
12
import { articles, liveblogs } from '../fixtures/pages';
23

34
describe('right slot on pages', () => {
45
[...articles, ...liveblogs].forEach(({ path, adTest }) => {
56
it(`Test ${path} has correct slot and iframe`, () => {
6-
// width has to be > 1300px in order for the right column to appear on liveblogs
7-
cy.viewport(1301, 1000);
7+
// viewport width has to be >= 1300px in order for the right column to appear on liveblogs
8+
cy.viewport(breakpoints['wide'], 1000);
89

910
cy.visit(`${path}?adtest=${adTest}`);
1011

‎cypress/fixtures/breakpoints.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { breakpoints } from '@guardian/source-foundations'
2+
3+
const breakpointsToTest: Array<keyof typeof breakpoints> = ['mobile', 'tablet', 'desktop', 'wide']
4+
const breakpointWidths = breakpointsToTest.map(b => breakpoints[b])
5+
6+
export { breakpointWidths as breakpoints }

0 commit comments

Comments
 (0)