Skip to content

Commit

Permalink
[MWPW-139389] : Update Nala test scripts as per Analytics 2.1 changes (
Browse files Browse the repository at this point in the history
…#211)

* fix circle-ci url

* analytics update 2_1

* update text.block.spec

* fix circle-ci url

* update circle ci

---------
Co-authored-by: nateekar <[email protected]>
  • Loading branch information
skumar09 authored Dec 4, 2023
1 parent bbbcec7 commit 54e3c3e
Show file tree
Hide file tree
Showing 7 changed files with 302 additions and 290 deletions.
96 changes: 96 additions & 0 deletions libs/webutil.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,50 @@ exports.WebUtil = class WebUtil {
return result;
}

/**
* Verifies that the specified CSS properties of the given locator match the expected values.
* @param {Object} locator - The locator to verify CSS properties for.
* @param {Object} cssProps - The CSS properties and expected values to verify.
* @returns {Boolean} - True if all CSS properties match the expected values, false otherwise.
*/
async verifyCSS_(locator, cssProps) {
this.locator = locator;
let result = true;
await Promise.allSettled(
Object.entries(cssProps).map(async ([property, expectedValue]) => {
try {
await expect(this.locator).toHaveCSS(property, expectedValue);
} catch (error) {
console.error(`CSS property ${property} not found:`, error);
result = false;
}
}),
);
return result;
}

/**
* Verifies that the specified CSS properties of the given locator match the expected values.
* @param {Object} locator - The locator to verify CSS properties for.
* @param {Object} cssProps - The CSS properties and expected values to verify.
* @returns {Boolean} - True if all CSS properties match the expected values, false otherwise.
*/
async verifyCSS_(locator, cssProps) {
this.locator = locator;
let result = true;
await Promise.allSettled(
Object.entries(cssProps).map(async ([property, expectedValue]) => {
try {
await expect(this.locator).toHaveCSS(property, expectedValue);
} catch (error) {
console.error(`CSS property ${property} not found:`, error);
result = false;
}
}),
);
return result;
}

/**
* Verifies that the specified attribute properties of the given locator match the expected values.
* @param {Object} locator - The locator to verify attributes.
Expand Down Expand Up @@ -292,6 +336,58 @@ exports.WebUtil = class WebUtil {
await this.page.screenshot({ path: `${folderPath}/${fileName}`, fullPage: true });
}

/**
* Generates analytic string for a given project.
* @param {string} project - The project identifier, defaulting to 'milo' if not provided.
* @returns {string} - A string formatted as 'gnav|<project>|nopzn|nopzn'.
*/
async getGnavDaalh(project=milo) {
return 'gnav'+ '|' + project + '|'+ 'nopzn' + '|' + 'nopzn' ;
}

/**
* Generates analytic string for a section based on a given counter value.
* @param {number|string} counter - A counter value used to generate the section identifier.
* @returns {string} - A string formatted as 's<counter>'.
*/
async getSectionDaalh(counter) {
return 's'+ counter;
}

/**
* Generates analytic string for a given block name and a counter.
* @param {string} blockName - The name of the block, which is sliced to its first 20 characters.
* @param {number|string} counter - A counter value i.e. block number.
* @returns {string} - A string formatted as 'b<counter>|<slicedBlockName>|nopzn|nopzn'.
*/
async getBlockDaalh(blockName, counter) {
const slicedBlockName = blockName.slice(0, 20);
return 'b'+ counter + '|' + slicedBlockName + '|'+ 'nopzn' + '|' + 'nopzn' ;
}

/**
* Generates analytic string for link or button based on link/button text , a counter, and the last header text.
* @param {string} linkText - The text of the link, which is cleaned and sliced to its first 20 characters.
* @param {number|string} counter - A counter value used in the identifier.
* @param {string} lastHeaderText - The last header text, which is cleaned and sliced to its first 20 characters.
* @param {boolean} [pzn=false] - boolean parameter, defaulting to false.(for personalization)
* @returns {string} - A string formatted as '<cleanedLinkText>-<counter>--<cleanedLastHeaderText>'.
*/
async getLinkDaall(linkText, counter, lastHeaderText, pzn = false) {
const cleanAndSliceText = (text) => {
return text
?.replace(/[^\w\s]+/g, ' ')
.replace(/\s+/g, ' ')
.replace(/^_+|_+$/g, '')
.trim()
.slice(0, 20);
}
const slicedLinkText = cleanAndSliceText(linkText);
const slicedLastHeaderText = cleanAndSliceText(lastHeaderText);
return `${slicedLinkText}-${counter}--${slicedLastHeaderText}`;
}


async takeScreenshotAndCompare(urlA, callbackA, urlB, callbackB, folderPath, fileName) {
console.info(`[Test Page]: ${urlA}`);
await this.page.goto(urlA);
Expand Down
13 changes: 1 addition & 12 deletions selectors/milo/marquee.block.page.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,18 +182,7 @@ export default class Marquee {
'autoplay': '',
'loop': '',
'muted': ''
},
'analytics': {
'marquee.daa-lh': {
'daa-lh': /b[1-9]|marquee|default|default/,
},
'section.daa-lh': {
'daa-lh': /s[1-9]/,
},
'content.daa-lh': {
'daa-lh': /b[1-9]|content|default|default/,
},
},
},
};
}
};
198 changes: 28 additions & 170 deletions selectors/milo/text.block.page.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,38 @@ export default class Text {
this.textlegal = this.page.locator('.text.legal.text-block.con-block.has-bg');
this.textLinkFarm = this.page.locator('.text.link-farm.text-block.con-block.has-bg');

this.textDetailM = page.locator('.detail-m');
this.textIntroDetailM = page.locator('.detail-m');
this.textLongFormDetailL = page.locator('.detail-l');
this.textLegalDetail = page.locator('.foreground');

this.textHeadline = this.text.locator('#text');
this.textIntroHeadline = this.text.locator('#text-intro');
this.textFullWidthHeadline = this.text.locator('#text-full-width');
this.textFullWidthLargeHeadline = this.text.locator('#text-full-width-large');
this.textLongFormLargeHeadline = this.text.locator('#text-long-form-large');
this.textInsetLargeMSpacingHeadline = this.text.locator('#text-inset-large-m-spacing');
this.textLinkFarmHeadline = this.text.locator('#text-link-farm-title');
this.textLinkFarmcolumnheading = this.text.locator('#heading-1');
this.textLinkFarmcolumns = this.text.locator('h3');
this.textLinkColumnOne = this.text.locator('div div:nth-child(1) a');
this.detailM = page.locator('.detail-m');
this.introDetailM = page.locator('.detail-m');
this.longFormDetailL = page.locator('.detail-l');
this.legalDetail = page.locator('.foreground');

this.headline = this.text.locator('#text');
this.introHeadline = this.text.locator('#text-intro');
this.fullWidthHeadline = this.text.locator('#text-full-width');
this.fullWidthLargeHeadline = this.text.locator('#text-full-width-large');
this.longFormLargeHeadline = this.text.locator('#text-long-form-large');
this.insetLargeMSpacingHeadline = this.text.locator('#text-inset-large-m-spacing');
this.linkFarmHeadline = this.text.locator('#text-link-farm-title');
this.linkFarmcolumnheading = this.text.locator('#heading-1');

this.linkFarmcolumns = this.text.locator('h3');
this.linkColumnOne = this.text.locator('div div:nth-child(1) a');
this.linkFormText = this.text.locator('p').nth(1);

this.textBodyXSS = this.text.locator('.body-xxs').first();
this.textBodyM = this.text.locator('.body-m').first();
this.textBodyL = this.text.locator('.body-l').first();

this.textPropertiesHeadingM = this.text.locator('#properties-h3').first();
this.bodyXSS = this.text.locator('.body-xxs').first();
this.bodyM = this.text.locator('.body-m').first();
this.bodyL = this.text.locator('.body-l').first();
this.propertiesHeadingM = this.text.locator('#properties-h3').first();

this.textBodyLink = this.page.locator('.body-m a');
this.textActionAreaLink = this.page.locator('.body-m.action-area a').nth(1);
this.outlineButton = this.text.locator('.con-button.outline');
this.actionAreaLink = this.page.locator('.body-m.action-area a').nth(1);
this.bodyLink = this.page.locator('.body-m a');

this.insetLargeMSpacingList1 = this.page.locator('.text.inset.medium.m-spacing ul').nth(0);
this.listOneItems = this.insetLargeMSpacingList1.locator('li')

this.textInsetLargeMSpacingList1 = this.page.locator('.text.inset.medium.m-spacing ul').nth(0);
this.listOneItems = this.textInsetLargeMSpacingList1.locator('li')

this.textInsetLargeMSpacingList2 = this.page.locator('.text.inset.medium.m-spacing ul').nth(1);
this.listTwoItems = this.textInsetLargeMSpacingList2.locator('li')
this.insetLargeMSpacingList2 = this.page.locator('.text.inset.medium.m-spacing ul').nth(1);
this.listTwoItems = this.insetLargeMSpacingList2.locator('li')

this.generalTermsOfUse = this.textlegal.locator('.body-xxs').nth(1);
this.publishText = this.textlegal.locator('.body-xxs').nth(2);
Expand Down Expand Up @@ -98,41 +98,30 @@ export default class Text {

// text block contents attributes
this.attProperties = {
'outline': { 'daa-ll': /^outline\|(.*)/ },
'filled': { 'daa-ll': /^filled\|(.*)/ },
'learn-more': { 'daa-ll': /^Learn more[-\s]\d+\|(.*)/ },
'text-link': { 'daa-ll': /^Explore the premium collection[-\s]\d+|(.*)/ },
'text': {
'class': 'text text-block con-block',
'daa-lh': 'b1|text|default|default',
},
'text-intro': {
'class': 'text intro text-block con-block has-bg max-width-8-desktop xxl-spacing-top xl-spacing-bottom',
'daa-lh': 'b1|text|default|default',
'style': 'background: rgb(255, 255, 255);',
},
'text-full-width': {
'class': 'text full-width text-block con-block max-width-8-desktop center xxl-spacing',
'daa-lh': 'b1|text|default|default',
},
'text-full-width-large': {
'class': 'text full-width large text-block con-block max-width-8-desktop center xxl-spacing',
'daa-lh': 'b1|text|default|default',
},
'text-long-form-large': {
'class': 'text long-form large text-block con-block max-width-8-desktop',
'daa-lh': 'b1|text|default|default',
},
'text-inset-medium-m-spacing': {
'class': 'text inset medium m-spacing text-block con-block max-width-8-desktop',
'daa-lh': 'b1|text|default|default',
},
'text-legal': {
'class': 'text legal text-block con-block has-bg',
},
'text-Link-farm': {
'class': 'text link-farm text-block con-block has-bg',
'daa-lh' : 'b1|text|default|default',
'style': 'background: rgb(255, 255, 255);',
},
'headingprops': {
Expand All @@ -141,136 +130,5 @@ export default class Text {
};
}

/**
* Verifies the css, attributes, styles, of elements or sections of the specified Text block.
*
* @param {string} textType - The type of the Text block to verify.
* Possible values are 'text', 'text (Intro)', 'Text (full width)'.
* text (full-width, large), text (long form, large), and text (inset, large, m spacing).
* text (legal), text (link-farm).
* @returns {Promise<boolean>} - Returns true if the specified Text type has the expected values.
*/
async verifyText(textType, data) {
switch (textType) {
case 'text':
// verify text visibility, content, css and attribute values
await expect(await this.text).toBeVisible();

await expect(await this.textHeadline).toContainText(data.h3Text);
await expect(await this.textBodyM).toContainText(data.bodyText);
await expect(await this.outlineButton).toContainText(data.outlineButtonText);

expect(await WebUtil.verifyAttributes(await this.text, this.attProperties.text)).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textHeadline, this.cssProperties['heading-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyM, this.cssProperties['body-m'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textActionAreaLink, this.cssProperties['body-m'])).toBeTruthy();
expect(await WebUtil.verifyAttributes(await this.textActionAreaLink, this.attProperties['text-link'])).toBeTruthy();
expect(await WebUtil.verifyAttributes(await this.outlineButton, this.attProperties['learn-more'])).toBeTruthy();

return true;
case 'text (intro)':
// verify text (intro) visibility, css and attribute values
await expect(this.textIntro).toBeVisible();
await expect(await this.textIntroHeadline).toContainText(data.h2Text);
await expect(await this.textBodyM).toContainText(data.bodyText);

expect(await WebUtil.verifyAttributes(await this.textIntro, this.attProperties['text-intro'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textIntroDetailM, this.cssProperties['detail-m'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textIntroHeadline, this.cssProperties['heading-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyM, this.cssProperties['body-m'])).toBeTruthy();

return true;

case 'text (full width)':
// verify text (full width) visibility, content, css and attribute values
await expect(this.textFullWidth).toBeVisible();

await expect(await this.textFullWidthHeadline).toContainText(data.h3Text);
await expect(await this.textBodyM).toContainText(data.bodyText);
await expect(await this.textBodyLink).toContainText(data.linkText);

expect(await WebUtil.verifyAttributes(await this.textFullWidth, this.attProperties['text-full-width'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textFullWidthHeadline, this.cssProperties['heading-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyM, this.cssProperties['body-m'])).toBeTruthy();
expect(await WebUtil.verifyAttributes(await this.textBodyLink, this.attProperties['text-link'])).toBeTruthy();

return true;

case 'text (full-width, large)':
// verify text (full-width, large) visibility, content, css and attribute values
await expect(this.textFullWidthLarge).toBeVisible();

await expect(await this.textFullWidthLargeHeadline).toContainText(data.h2Text);
await expect(await this.textBodyM).toContainText(data.bodyText);
await expect(await this.textBodyLink).toContainText(data.linkText);

expect(await WebUtil.verifyAttributes(await this.textFullWidthLarge, this.attProperties['text-full-width-large'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textFullWidthLargeHeadline, this.cssProperties['heading-xl'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyM, this.cssProperties['body-m'])).toBeTruthy();
expect(await WebUtil.verifyAttributes(await this.textBodyLink, this.attProperties['text-link'])).toBeTruthy();

return true;

case 'text (long form, large)':
// verify text (long-form, large) visibility, content, css and attribute values
await expect(await this.textLongFormLarge).toBeVisible();

await expect(await this.textLongFormDetailL).toContainText(data.detailText);
await expect(await this.textLongFormLargeHeadline).toContainText(data.h2Text);
await expect(await this.textBodyL).toContainText(data.bodyText);

expect(await WebUtil.verifyAttributes(await this.textLongFormLarge, this.attProperties['text-long-form-large'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textLongFormDetailL, this.cssProperties['detail-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textLongFormLargeHeadline, this.cssProperties['heading-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyL, this.cssProperties['body-l'])).toBeTruthy();

return true;

case 'text (inset, large, m spacing)':
// verify text (inset, large, m spacing) visibility, content, css and attribute values
await expect(await this.textInsetLargeMSpacing).toBeVisible();

await expect(await this.textInsetLargeMSpacingHeadline).toContainText(data.h3Text);
await expect(await this.textBodyL).toContainText(data.bodyText);
await expect(await this.listOneItems).toHaveCount(data.listCount1);

expect(await WebUtil.verifyAttributes(await this.textInsetLargeMSpacing, this.attProperties['text-inset-medium-m-spacing'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textInsetLargeMSpacingHeadline, this.cssProperties['heading-m'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyL, this.cssProperties['body-l'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textPropertiesHeadingM, this.cssProperties['heading-m'])).toBeTruthy();

return true;

case 'text (legal)':
// verify text (legal) visibility, content, css and attribute values
await expect(await this.textlegal).toBeVisible();

await expect(await this.generalTermsOfUse).toContainText(data.termsOfUseText);
await expect(await this.publishText).toContainText(data.publishText);
await expect(await this.generalTerms).toContainText(data.generalTermsText);
await expect(await this.legalInfoLink).toContainText(data.linkText);

expect(await WebUtil.verifyAttributes(await this.textlegal, this.attProperties['text-legal'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textBodyXSS, this.cssProperties['body-xss'])).toBeTruthy();

return true;

case 'text (link-farm)':
// verify text (link-farm) visibility, content, css and attribute values
await expect(await this.textLinkFarm).toBeVisible();

await expect(await this.textLinkFarmcolumns).toHaveCount(data.headingColumns);
await expect(await this.textLinkColumnOne).toHaveCount(data.linksCount);
await expect(await this.linkFormText).toContainText(data.linkText);

expect(await WebUtil.verifyAttributes(await this.textLinkFarm, this.attProperties['text-Link-farm'])).toBeTruthy();
expect(await WebUtil.verifyCSS(await this.textLinkFarmHeadline, this.cssProperties['heading-l'])).toBeTruthy();
expect(await WebUtil.verifyAttributes(await this.textLinkFarmcolumnheading, this.attProperties['headingprops'])).toBeTruthy();

return true;

default:
throw new Error(`Unsupported Text type: ${this.textType}`);
}
}
};

Loading

0 comments on commit 54e3c3e

Please sign in to comment.