Skip to content

Commit

Permalink
Update E2e test
Browse files Browse the repository at this point in the history
  • Loading branch information
@akinsola-guardian
akinsola-guardian committed Feb 10, 2025
1 parent 61b823d commit 1b2823b
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 102 deletions.
25 changes: 18 additions & 7 deletions apps/github-pages/src/components/CmpTest.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import { cmp, onConsentChange, log } from '@guardian/libs';
import { onMount } from 'svelte';
let useNonAdvertisedList = window.location.search.includes('CMP_MAIN');
let isUserSignedIn = window.location.search.includes('CMP_SIGNED_IN');
let useNonAdvertisedList = window.location.search.includes('NON_ADV');
let isUserSignedIn = window.location.search.includes('SIGNED_IN');
switch (window.location.hash) {
case '#tcfv2':
Expand Down Expand Up @@ -40,11 +40,22 @@
log('cmp', event);
}
let setABTest = () => {
localStorage.setItem('gu.ab.participations', JSON.stringify({
value: {
ConsentOrPayBanner: {
variant: 'activate',
},
}
}));
}
let clearPreferences = () => {
// clear local storage
// https://documentation.sourcepoint.com/web-implementation/general/cookies-and-local-storage#cmp-local-storage
localStorage.clear();
setABTest();
// clear cookies
// https://documentation.sourcepoint.com/web-implementation/general/cookies-and-local-storage#cmp-cookies
document.cookie.split(';').forEach((cookie) => {
Expand All @@ -70,12 +81,12 @@
const toggleIsUserSignedIn = () => {
isUserSignedIn = !isUserSignedIn;
toggleQueryParams('CMP_SIGNED_IN');
toggleQueryParams('SIGNED_IN');
};
const toggleUseNonAdvertisedList = () => {
useNonAdvertisedList = !useNonAdvertisedList;
toggleQueryParams('CMP_MAIN');
toggleQueryParams('NON_ADV');
};
let framework = JSON.parse(localStorage.getItem('framework'));
Expand Down Expand Up @@ -116,11 +127,10 @@
break;
}
// do this loads to make sure that doesn't break things
cmp.init({
country,
isUserSignedIn: isUserSignedIn ?? false,
useNonAdvertisedList: useNonAdvertisedList ?? false,
isUserSignedIn: isUserSignedIn,
useNonAdvertisedList: useNonAdvertisedList,
});
});
</script>
Expand All @@ -131,6 +141,7 @@
>open privacy manager</button
>
<button on:click={clearPreferences}>clear preferences</button>
<button on:click={setABTest}>set ab test</button>
<label class={framework == 'tcfv2' ? 'selected' : 'none'}>
<input
type="radio"
Expand Down
277 changes: 182 additions & 95 deletions libs/@guardian/libs/playwright/e2e/sourcepoint-tcfv2.spec.js.disabled
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@ import { expect, test } from '@playwright/test';
import { ACCOUNT_ID, ENDPOINT } from '../fixtures/sourcepointConfig';

const iframeMessage = `[id^="sp_message_iframe_"]`;
const iframePrivacyManager = '#sp_message_iframe_106842';
// const iframePrivacyManager = '#sp_message_iframe_106842';
const iframePrivacyManager = '#sp_message_iframe_1251121';

const acceptAllButton = 'sp_choice_type_11';
const rejectAllButton = 'sp_choice_type_13';

const url = `http://localhost:4321/csnx/cmp-test-page#tcfv2`;
const nonAdvertisingBannerUrl = `http://localhost:4321/csnx/cmp-test-page?CMP_MAIN#tcfv2`


async function getIframeBody(page, selector) {
const iframeElement = await page.locator(`iframe${selector}`).elementHandle();
Expand Down Expand Up @@ -59,120 +65,201 @@ test.describe('Document', () => {
});
});
test.describe('Interaction', () => {
const buttonTitle = 'Yes, I accept';

test(`should give all consents when clicking "${buttonTitle}"`, async ({
page,
}) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);
test.describe('Consent or Pay banner', () => {
test(`should give all consents when clicking accept all`, async ({
page,
}) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${acceptAllButton}`);

await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('true');
}
});

test(`should have no consents when clicking reject all`, async ({
page,
}) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${rejectAllButton}`);

await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('false');
}
});

test(`should deactivate purpose 5, 6, 8, 11 if rejecting 'Personalised content and content measurement' in privacy manager`, async ({ page }) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button[title="${buttonTitle}"]`);
const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${acceptAllButton}`);

await page.waitForTimeout(2000);
await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
await page.click('[data-cy=pm]');

const privacyManagerIframe = await getIframeBody(
page,
iframePrivacyManager,
);
expect(consent).toBe('true');
}
});
await privacyManagerIframe.locator('div.pur-buttons-container').nth(2).locator('button').nth(1).click();
await privacyManagerIframe.click('button[title="Save and close"]');

test(`should deactivate purpose 1 only`, async ({ page }) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);
await page.waitForTimeout(2000);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button[title="${buttonTitle}"]`);
for (const purpose of [1, 2, 3, 4, 7, 9, 10]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('true');
}

await page.waitForTimeout(2000);
for (const purpose of [5, 6, 8, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('false');
}
});

await page.click('[data-cy=pm]');
})

const privacyManagerIframe = await getIframeBody(
test.describe('Non Advertising Banner', () => {
test(`should give all consents when clicking accept all`, async ({
page,
iframePrivacyManager,
);
await privacyManagerIframe.click(
'div[title="Store and/or access information on a device"] span.off',
);
await privacyManagerIframe.click('button[title="Save and close"]');
}) => {
await page.goto(nonAdvertisingBannerUrl);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url: nonAdvertisingBannerUrl },
{ name: 'gdprApplies', value: 'true', url: nonAdvertisingBannerUrl },
]);

await page.waitForFunction(
() =>
document
.querySelector(`[data-purpose="1"]`)
.getAttribute('data-consent') === 'false',
);
const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${acceptAllButton}`);

const consent = await page.getAttribute(
`[data-purpose="1"]`,
'data-consent',
);
expect(consent).toBe('false');
await page.waitForTimeout(2000);

for (const purpose of [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('true');
}
});
for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('true');
}
});

test(`should deactivate all purposes except purpose 1`, async ({ page }) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);
test(`should have no consents when clicking reject all`, async ({
page,
}) => {
await page.goto(nonAdvertisingBannerUrl);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url: nonAdvertisingBannerUrl },
{ name: 'gdprApplies', value: 'true', url: nonAdvertisingBannerUrl },
]);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button[title="${buttonTitle}"]`);
const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${rejectAllButton}`);

await page.click('[data-cy=pm]');
await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('false');
}
});
})

const privacyManagerIframe = await getIframeBody(
test.describe('Moving from Consent or Pay to Non Advertising Banner', () => {
test(`should give all consents in non advertised banner when clicking accept all in Consent or Pay`, async ({
page,
iframePrivacyManager,
);
await privacyManagerIframe.click(
'div[title="Store and/or access information on a device"] span.on',
);
await page
.frameLocator('iframe[title="SP Consent Message"]')
.getByRole('button', { name: 'Off' })
.click();
await privacyManagerIframe.click('button[title="Save and close"]');

await page.waitForFunction(
() =>
document
.querySelector(`[data-purpose="2"]`)
.getAttribute('data-consent') === 'false',
);
}) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);

const consent = await page.getAttribute(
`[data-purpose="1"]`,
'data-consent',
);
expect(consent).toBe('true');
const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${acceptAllButton}`);

for (const purpose of [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('false');
}
await page.waitForTimeout(2000);

await page.goto(nonAdvertisingBannerUrl);

await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('true');
}

});

test(`should give no consents in non advertised banner when clicking reject all in Consent or Pay`, async ({
page,
}) => {
await page.goto(url);
await page.context().addCookies([
{ name: 'ccpaApplies', value: 'false', url },
{ name: 'gdprApplies', value: 'true', url },
]);

const iframe = await getIframeBody(page, iframeMessage);
await iframe.click(`button.${rejectAllButton}`);

await page.waitForTimeout(2000);

await page.goto(nonAdvertisingBannerUrl);

await page.waitForTimeout(2000);

for (const purpose of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
const consent = await page.getAttribute(
`[data-purpose="${purpose}"]`,
'data-consent',
);
expect(consent).toBe('false');
}

});
});


});

0 comments on commit 1b2823b

Please sign in to comment.