From 7ca9dbca37d47bc6bea6250fd98d09c87d1cec83 Mon Sep 17 00:00:00 2001 From: Santoshkumar Nateekar Date: Tue, 27 Feb 2024 12:41:04 -0800 Subject: [PATCH] [MWPW-143451 Merch Card ] Fix Merch cards tests (#277) * fix merch cards tests * fix eslint * update new ln --------- Co-authored-by: nateekar --- features/milo/merchcard.block.spec.js | 384 +++++------ selectors/milo/merchcard.block.page.js | 202 +++--- tests/milo/merchcard.block.test.js | 839 ++++++++++++------------- 3 files changed, 704 insertions(+), 721 deletions(-) diff --git a/features/milo/merchcard.block.spec.js b/features/milo/merchcard.block.spec.js index 0488bd59..e393a2fe 100644 --- a/features/milo/merchcard.block.spec.js +++ b/features/milo/merchcard.block.spec.js @@ -1,192 +1,192 @@ -module.exports = { - FeatureName: 'Merch Card Block', - features: [ - { - tcid: '0', - name: '@Merch-card (Segment)', - path: '/drafts/nala/blocks/merch-card/merch-card-segment', - data: { - title: 'Individuals', - price: 'US$59.99/mo', - strikethroughPrice: 'US$89.99/mo', - description: 'Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27', - link1Text: "See what's included", - link2Text: 'Learn more', - footerOutlineButtonText: 'Learn More', - footerBlueButtonText: 'Save now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '1', - name: '@Merch-card (Segment) with Badge', - path: '/drafts/nala/blocks/merch-card/merch-card-segment-with-badge', - data: { - title: 'Individuals', - badgeText: 'Best value', - price: 'US$59.99/mo', - strikethroughPrice: 'US$89.99/mo', - description: 'Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27', - link1Text: "See what's included", - link2Text: 'Learn more', - footerOutlineButtonText: 'Learn More', - footerBlueButtonText: 'Save now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '2', - name: '@Merch-card (special-offers) ', - path: '/drafts/nala/blocks/merch-card/merch-card-special-offers', - data: { - titleH4: 'INDIVIDUALS', - titleH3: 'Save over 30% on Creative Cloud All Apps.', - description1: 'Get 20+ creative apps and save big when you choose a yearly plan instead of a monthly plan.', - description2: 'Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.', - footerBlueButtonText: 'Save now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '3', - name: '@Merch-card (special-offers) with badge', - path: '/drafts/nala/blocks/merch-card/merch-card-special-offers-with-badge', - data: { - titleH4: 'INDIVIDUALS', - titleH3: 'Get 10% off Photoshop.', - badgeText: 'LIMITED TIME WEEKLY OFFER', - price: 'US$383.88/yr', - strikethroughPrice: 'US$32.99/mo', - description: 'Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.', - link1Text: "See terms", - footerOutlineButtonText: 'Learn More', - footerBlueButtonText: 'Save now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '4', - name: '@Merch-card (plans)', - path: '/drafts/nala/blocks/merch-card/merch-cards-plans', - data: { - titleH3: 'Creative Cloud All Apps', - titleH5: 'Desktop', - price: 'US$79.99/mo', - description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', - link1Text: "See plan & pricing details", - footerBlueButtonText: 'Buy now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '5', - name: '@Merch-card (plans) with badge', - path: '/drafts/nala/blocks/merch-card/merch-card-plans-with-badge', - data: { - titleH3: 'Creative Cloud All Apps', - titleH5: 'Desktop', - badgeText: 'Best value', - price: 'US$79.99/mo', - description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', - link1Text: "See plan & pricing details", - footerBlueButtonText: 'Buy now', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '6', - name: '@Merch-card (plans, secure)', - path: '/drafts/nala/blocks/merch-card/merch-card-plans-secure', - data: { - titleH3: 'Acrobat', - titleH5: 'Desktop + mobile', - price: 'US$79.99/mo', - description: 'The complete PDF solution for working anywhere (includes desktop, web, and mobile access).', - link1Text: "See plan & pricing details", - checkboxLabel: "Add a 30-day free trial of Adobe Stock.*", - secureLabel: "Secure transaction", - footerBlueButton1Text: 'Buy now', - footerBlueButton2Text: 'Buy now', - footerOutlineButtonText: 'Free trial', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '7', - name: '@Merch-card (plans, secure) with badge', - path: '/drafts/nala/blocks/merch-card/merch-cards-plans-secure-with-badge', - data: { - titleH3: 'Creative Cloud All Apps', - titleH5: 'Desktop', - badgeText: 'Best value', - price: 'US$79.99/mo', - description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', - link1Text: "See plan & pricing details", - checkboxLabel: "Add a 30-day free trial of Adobe Stock.*", - secureLabel: "Secure transaction", - footerBlueButton1Text: 'Buy now', - footerOutlineButtonText: 'Free trial', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '8', - name: '@Merch-card (catalog)', - path: '/drafts/nala/blocks/merch-card/merch-cards-catalog', - data: { - titleH3: 'Creative Cloud All Apps', - titleH4: 'Desktop', - price: 'US$79.99/mo', - description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', - link1Text: "See what’s included", - link2Text: "Learn more", - footerBlueButton1Text: 'Buy now', - footerOutlineButtonText: 'free trial', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '9', - name: '@Merch-card (catalog) with badge', - path: '/drafts/nala/blocks/merch-card/march-cards-catalog-with-badge', - data: { - titleH3: 'Creative Cloud All Apps', - titleH4: 'Desktop', - badgeText: 'Most popular', - badgeBgColor: '#EDCC2D', - badgeColor: '#000000', - price: 'US$79.99/mo', - description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', - link1Text: "See what’s included", - link2Text: "Learn more", - footerBlueButton1Text: 'Buy now', - footerOutlineButtonText: 'free trial', - }, - tags: '@merch-card @smoke @regression @milo', - }, - { - tcid: '10', - name: '@Merch-card (catalog) with more info and badge', - path: '/drafts/nala/blocks/merch-card/merch-cards-catalog-with-more-info-and-badge', - data: { - titleH3: 'Creative Cloud All Apps', - titleH4: 'Desktop', - badgeText: 'Most popular', - badgeBgColor: '#EDCC2D', - badgeColor: '#000000', - actionMenuListCount: 4, - actionMenuText1: 'Best for', - actionMenuText2: 'Storage', - actionMenuText3: '100 GB of cloud storage', - actionMenuText4: '100 GB of cloud storage', - price: 'US$79.99/mo', - description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', - link1Text: "See what’s included", - link2Text: "Learn more", - footerBlueButton1Text: 'Buy now', - footerOutlineButtonText: 'free trial', - }, - tags: '@merch-card @smoke @regression @milo', - }, - ], -}; +module.exports = { + FeatureName: 'Merch Card Block', + features: [ + { + tcid: '0', + name: '@Merch-card (Segment)', + path: '/drafts/nala/blocks/merch-card/merch-card-segment', + data: { + title: 'Individuals', + price: 'US$59.99/mo', + strikethroughPrice: 'US$89.99/mo', + description: 'Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27', + link1Text: 'See what\'s included', + link2Text: 'Learn more', + footerOutlineButtonText: 'Learn More', + footerBlueButtonText: 'Save now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '1', + name: '@Merch-card (Segment) with Badge', + path: '/drafts/nala/blocks/merch-card/merch-card-segment-with-badge', + data: { + title: 'Individuals', + badgeText: 'Best value', + price: 'US$59.99/mo', + strikethroughPrice: 'US$89.99/mo', + description: 'Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27', + link1Text: 'See what\'s included', + link2Text: 'Learn more', + footerOutlineButtonText: 'Learn More', + footerBlueButtonText: 'Save now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '2', + name: '@Merch-card (special-offers) ', + path: '/drafts/nala/blocks/merch-card/merch-card-special-offers', + data: { + titleH3: 'INDIVIDUALS', + titleH4: 'Save over 30% on Creative Cloud All Apps.', + description1: 'Get 20+ creative apps and save big when you choose a yearly plan instead of a monthly plan.', + description2: 'Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.', + footerBlueButtonText: 'Save now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '3', + name: '@Merch-card (special-offers) with badge', + path: '/drafts/nala/blocks/merch-card/merch-card-special-offers-with-badge', + data: { + titleH3: 'INDIVIDUALS', + titleH4: 'Get 10% off Photoshop.', + badgeText: 'LIMITED TIME WEEKLY OFFER', + price: 'US$383.88/yr', + strikethroughPrice: 'US$32.99/mo', + description: 'Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.', + link1Text: 'See terms', + footerOutlineButtonText: 'Learn More', + footerBlueButtonText: 'Save now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '4', + name: '@Merch-card (plans)', + path: '/drafts/nala/blocks/merch-card/merch-cards-plans', + data: { + titleH3: 'Creative Cloud All Apps', + titleH5: 'Desktop', + price: 'US$79.99/mo', + description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', + link1Text: 'See plan & pricing details', + footerBlueButtonText: 'Buy now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '5', + name: '@Merch-card (plans) with badge', + path: '/drafts/nala/blocks/merch-card/merch-card-plans-with-badge', + data: { + titleH3: 'Creative Cloud All Apps', + titleH4: 'Desktop', + badgeText: 'Best value', + price: 'US$79.99/mo', + description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', + link1Text: 'See plan & pricing details', + footerBlueButtonText: 'Buy now', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '6', + name: '@Merch-card (plans, secure)', + path: '/drafts/nala/blocks/merch-card/merch-card-plans-secure', + data: { + titleH3: 'Acrobat', + titleH5: 'Desktop + mobile', + price: 'US$79.99/mo', + description: 'The complete PDF solution for working anywhere (includes desktop, web, and mobile access).', + link1Text: 'See plan & pricing details', + checkboxLabel: 'Add a 30-day free trial of Adobe Stock.*', + secureLabel: 'Secure transaction', + footerBlueButton1Text: 'Buy now', + footerBlueButton2Text: 'Buy now', + footerOutlineButtonText: 'Free trial', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '7', + name: '@Merch-card (plans, secure) with badge', + path: '/drafts/nala/blocks/merch-card/merch-cards-plans-secure-with-badge', + data: { + titleH3: 'Creative Cloud All Apps', + titleH5: 'Desktop', + badgeText: 'Best value', + price: 'US$79.99/mo', + description: 'Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)', + link1Text: 'See plan & pricing details', + checkboxLabel: 'Add a 30-day free trial of Adobe Stock.*', + secureLabel: 'Secure transaction', + footerBlueButton1Text: 'Buy now', + footerOutlineButtonText: 'Free trial', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '8', + name: '@Merch-card (catalog)', + path: '/drafts/nala/blocks/merch-card/merch-cards-catalog', + data: { + titleH3: 'Creative Cloud All Apps', + titleH4: 'Desktop', + price: 'US$79.99/mo', + description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', + link1Text: 'See what’s included', + link2Text: 'Learn more', + footerBlueButton1Text: 'Buy now', + footerOutlineButtonText: 'free trial', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '9', + name: '@Merch-card (catalog) with badge', + path: '/drafts/nala/blocks/merch-card/march-cards-catalog-with-badge', + data: { + titleH3: 'Creative Cloud All Apps', + titleH4: 'Desktop', + badgeText: 'Most popular', + badgeBgColor: '#EDCC2D', + badgeColor: '#000000', + price: 'US$79.99/mo', + description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', + link1Text: 'See what’s included', + link2Text: 'Learn more', + footerBlueButton1Text: 'Buy now', + footerOutlineButtonText: 'free trial', + }, + tags: '@merch-card @smoke @regression @milo', + }, + { + tcid: '10', + name: '@Merch-card (catalog) with more info and badge', + path: '/drafts/nala/blocks/merch-card/merch-cards-catalog-with-more-info-and-badge', + data: { + titleH3: 'Creative Cloud All Apps', + titleH4: 'Desktop', + badgeText: 'Most popular', + badgeBgColor: '#EDCC2D', + badgeColor: '#000000', + actionMenuListCount: 4, + actionMenuText1: 'Best for', + actionMenuText2: 'Storage', + actionMenuText3: '100 GB of cloud storage', + actionMenuText4: '100 GB of cloud storage', + price: 'US$79.99/mo', + description: 'Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. (Substance 3D apps are not included.)', + link1Text: 'See what’s included', + link2Text: 'Learn more', + footerBlueButton1Text: 'Buy now', + footerOutlineButtonText: 'free trial', + }, + tags: '@merch-card @smoke @regression @milo', + }, + ], +}; diff --git a/selectors/milo/merchcard.block.page.js b/selectors/milo/merchcard.block.page.js index 2cdf2461..87eb96fd 100644 --- a/selectors/milo/merchcard.block.page.js +++ b/selectors/milo/merchcard.block.page.js @@ -1,104 +1,98 @@ -export default class Merchcard { - constructor(page, nth = 0) { - this.page = page; - // modal locators - this.merchCard = this.page.locator('.merch-card').nth(nth); - this.segment = this.page.locator('.merch-card.segment').nth(nth); - this.sepcialOffers = this.page.locator('.merch-card.special-offers').nth(nth); - this.plans = this.page.locator('.merch-card.plans').nth(nth); - this.catalog = this.page.locator('.merch-card.catalog').nth(nth); - - // inline price and strikethrough price - this.inlinePrice1 = this.merchCard.locator('span.placeholder-resolved').nth(0); - this.inlinePrice2 = this.merchCard.locator('span.placeholder-resolved').nth(1); - this.price = this.inlinePrice1.locator('.price'); - this.priceCurrencySymbol = this.inlinePrice1.locator('.price-currency-symbol'); - this.priceInteger = this.inlinePrice1.locator('.price-integer'); - this.priceDecimalDelimiter = this.inlinePrice1.locator('.price-decimals-delimiter'); - this.priceDecimals = this.inlinePrice1.locator('.price-decimals'); - this.priceRecurrence = this.inlinePrice1.locator('.price-recurrence'); - - this.strikethroughPrice = this.inlinePrice2.locator('.price'); - this.strikethroughPriceCurrencySymbol = this.inlinePrice2.locator('.price-currency-symbol'); - this.strikethroughPriceInteger = this.inlinePrice2.locator('.price-integer'); - this.strikethroughPriceDecimalDelimiter = this.inlinePrice2.locator('.price-decimals-delimiter'); - this.strikethroughPriceDecimals = this.inlinePrice2.locator('.price-decimals'); - this.strikethroughPriceRecurrence = this.inlinePrice2.locator('.price-recurrence'); - - // merch-card segment locators - this.segmentRibbon = this.merchCard.locator('.segment-badge'); - this.segmentTitle = this.segment.locator('h3[slot="heading-xs"]').nth(0); - this.segmentDescription1 = this.segment.locator('div[slot="body-xs"] p').nth(0); - this.segmentDescription2 = this.segment.locator('div[slot="body-xs"] p').nth(1); - - this.linkText1 = this.segmentDescription2.locator('a').nth(0); - this.linkText2 = this.segmentDescription2.locator('a').nth(1); - - // merch-card special offers - this.sepcialOffersImage = this.sepcialOffers.locator('div[slot="bg-image"] img'); - this.sepcialOffersRibbon = this.merchCard.locator('.special-offers-badge'); - this.sepcialOffersTitleH4 = this.sepcialOffers.locator('h5[slot="detail-m"]'); - this.sepcialOffersTitleH5 = this.sepcialOffers.locator('h4[slot="body-xss"]'); - this.sepcialOffersTitleH3 = this.sepcialOffers.locator('h3[slot="heading-xs"]'); - - this.sepcialOffersDescription1 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(1); - this.sepcialOffersDescription2 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(2); - - this.sepcialOffersDescription3 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(3); - this.sepcialOffersLinkText3 = this.sepcialOffersDescription3.locator('a').nth(0); - - this.seeTermsTextLink = this.merchCard.locator('a:has-text("See terms")'); - - // merch-card plans locators - //this.productIcon = this.plans.locator('#shadow-root div.icons'); - this.productIcon = this.plans.locator('img'); - this.plansRibbon = this.plans.locator('.plans-badge'); - this.plansCardTitleH3 = this.plans.locator('h3[slot="heading-xs"]'); - this.plansCardTitleH5 = this.plans.locator('h5[slot="detail-m"]'); - this.plansCardDescription2 = this.plans.locator('div[slot="body-xs"] p').nth(2); - this.seePlansTextLink = this.merchCard.locator('a:has-text("See plan & pricing details")'); - - // merch-card catalog - this.catalogProductIcon = this.catalog.locator('#shadow-root div.icons'); - this.catalogRibbon = this.catalog.locator('.catalog-badge'); - this.catalogActionMenu = this.catalog.locator('div[slot="action-menu-content"]'); - this.catalogActionMenuList = this.catalogActionMenu.locator('ul li'); - this.catalogActionMenuPText1 = this.catalogActionMenu.locator('p').nth(0); - this.catalogActionMenuPText2 = this.catalogActionMenu.locator('p').nth(1); - this.catalogActionMenuPText3 = this.catalogActionMenu.locator('p').nth(2); - this.catalogActionMenuPText4 = this.catalogActionMenu.locator('p').nth(3); - this.catalogActionMenuPText5 = this.catalogActionMenu.locator('p ').nth(4); - this.systemRequirementTextLink = this.merchCard.locator('a:has-text("See system requirements")'); - - this.catalogCardTitleH3 = this.catalog.locator('h3[slot="heading-xs"]'); - this.catalogCardTitleH4 = this.catalog.locator('h4[slot="body-xxs"]'); - this.catalogCardDescription2 = this.catalog.locator('div[slot="body-xs"] p').nth(2); - this.seeWhatsIncludedTextLink = this.merchCard.locator('a:has-text("See what’s included")'); - this.learnMoreTextLink = this.merchCard.locator('a:has-text("Learn more")'); - - - // merch-card footer sections - this.footer = this.merchCard.locator('div[slot="footer"]'); - this.footerCheckbox = this.page.locator('#stock-checkbox input[type="checkbox"]'); - this.footerCheckboxLabel = this.merchCard.locator('#stock-checkbox'); - this.secureTransactionIcon = this.merchCard.locator('.secure-transaction-icon'); - this.secureTransactionLabel = this.merchCard.locator('.secure-transaction-label'); - this.footerOutlineButton = this.merchCard.locator('a.con-button.outline'); - this.footerOutlineButton2 = this.merchCard.locator('a.con-button.outline').nth(1); - this.footerBlueButton = this.merchCard.locator('a.con-button.blue').nth(0); - this.footerBlueButton2 = this.merchCard.locator('a.con-button.blue').nth(1); - - // merch-card attributes - this.attributes = { - 'segmentRibbon': { - 'style': /background-color:\s*#EDCC2D;\s*color:\s*#000000;\s*/, - }, - 'specialOfferRibbon': { - 'style': /background-color:\s* #F68D2E;\s*color:\s*#000000;\s*/, - }, - 'plansRibbon': { - 'style': /background-color:\s*#EDCC2D;\s*color:\s*#000000;\s*/, - }, - }; - } -} +export default class Merchcard { + constructor(page, nth = 0) { + this.page = page; + + // modal locators + this.merchCard = this.page.locator('.merch-card').nth(nth); + this.segment = this.page.locator('.merch-card.segment').nth(nth); + this.sepcialOffers = this.page.locator('.merch-card.special-offers').nth(nth); + this.plans = this.page.locator('.merch-card.plans').nth(nth); + this.catalog = this.page.locator('.merch-card.catalog').nth(nth); + + // inline price and strikethrough price + this.inlinePrice1 = this.merchCard.locator('span.placeholder-resolved').nth(0); + this.inlinePrice2 = this.merchCard.locator('span.placeholder-resolved').nth(1); + this.price = this.inlinePrice1.locator('.price'); + this.priceCurrencySymbol = this.inlinePrice1.locator('.price-currency-symbol'); + this.priceInteger = this.inlinePrice1.locator('.price-integer'); + this.priceDecimalDelimiter = this.inlinePrice1.locator('.price-decimals-delimiter'); + this.priceDecimals = this.inlinePrice1.locator('.price-decimals'); + this.priceRecurrence = this.inlinePrice1.locator('.price-recurrence'); + + this.strikethroughPrice = this.inlinePrice2.locator('.price'); + this.strikethroughPriceCurrencySymbol = this.inlinePrice2.locator('.price-currency-symbol'); + this.strikethroughPriceInteger = this.inlinePrice2.locator('.price-integer'); + this.strikethroughPriceDecimalDelimiter = this.inlinePrice2.locator('.price-decimals-delimiter'); + this.strikethroughPriceDecimals = this.inlinePrice2.locator('.price-decimals'); + this.strikethroughPriceRecurrence = this.inlinePrice2.locator('.price-recurrence'); + + // merch-card segment locators + this.segmentRibbon = this.merchCard.locator('.segment-badge'); + this.segmentTitle = this.segment.locator('h3[slot="heading-xs"]').nth(0); + this.segmentDescription1 = this.segment.locator('div[slot="body-xs"] p').nth(0); + this.segmentDescription2 = this.segment.locator('div[slot="body-xs"] p').nth(1); + + this.linkText1 = this.segmentDescription2.locator('a').nth(0); + this.linkText2 = this.segmentDescription2.locator('a').nth(1); + + // merch-card special offers + this.sepcialOffersImage = this.sepcialOffers.locator('div[slot="bg-image"] img'); + this.sepcialOffersRibbon = this.merchCard.locator('.special-offers-badge'); + this.sepcialOffersTitleH4 = this.sepcialOffers.locator('h4[slot="heading-xs"]'); + this.sepcialOffersTitleH5 = this.sepcialOffers.locator('h5[slot="body-xs"]'); + this.sepcialOffersTitleH3 = this.sepcialOffers.locator('h3[slot="detail-m"]'); + + this.sepcialOffersDescription1 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(1); + this.sepcialOffersDescription2 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(2); + this.sepcialOffersDescription3 = this.sepcialOffers.locator('div[slot="body-xs"] p').nth(3); + this.sepcialOffersLinkText3 = this.sepcialOffersDescription3.locator('a').nth(0); + + this.seeTermsTextLink = this.merchCard.locator('a:has-text("See terms")'); + + // merch-card plans locators + this.productIcon = this.plans.locator('img'); + this.plansRibbon = this.plans.locator('.plans-badge'); + this.plansCardTitleH3 = this.plans.locator('h3[slot="heading-xs"]'); + this.plansCardTitleH4 = this.plans.locator('h4[slot="body-xxs"]'); + this.plansCardTitleH5 = this.plans.locator('h5[slot="body-xxs"]'); + this.plansCardDescription1 = this.plans.locator('div[slot="body-xs"] p').nth(1); + this.plansCardDescription2 = this.plans.locator('div[slot="body-xs"] p').nth(2); + this.seePlansTextLink = this.merchCard.locator('a:has-text("See plan & pricing details")'); + + // merch-card catalog + this.catalogProductIcon = this.catalog.locator('#shadow-root div.icons'); + this.catalogRibbon = this.catalog.locator('.catalog-badge'); + this.catalogActionMenu = this.catalog.locator('div[slot="action-menu-content"]'); + this.catalogActionMenuList = this.catalogActionMenu.locator('ul li'); + this.catalogActionMenuPText1 = this.catalogActionMenu.locator('p').nth(0); + this.catalogActionMenuPText2 = this.catalogActionMenu.locator('p').nth(1); + this.catalogActionMenuPText3 = this.catalogActionMenu.locator('p').nth(2); + this.catalogActionMenuPText4 = this.catalogActionMenu.locator('p').nth(3); + this.catalogActionMenuPText5 = this.catalogActionMenu.locator('p ').nth(4); + this.systemRequirementTextLink = this.merchCard.locator('a:has-text("See system requirements")'); + + this.catalogCardTitleH3 = this.catalog.locator('h3[slot="heading-xs"]'); + this.catalogCardTitleH4 = this.catalog.locator('h4[slot="body-xxs"]'); + this.catalogCardDescription2 = this.catalog.locator('div[slot="body-xs"] p').nth(2); + this.seeWhatsIncludedTextLink = this.merchCard.locator('a:has-text("See what’s included")'); + this.learnMoreTextLink = this.merchCard.locator('a:has-text("Learn more")'); + + // merch-card footer sections + this.footer = this.merchCard.locator('div[slot="footer"]'); + this.footerCheckbox = this.page.locator('#stock-checkbox input[type="checkbox"]'); + this.footerCheckboxLabel = this.merchCard.locator('#stock-checkbox'); + this.secureTransactionIcon = this.merchCard.locator('.secure-transaction-icon'); + this.secureTransactionLabel = this.merchCard.locator('.secure-transaction-label'); + this.footerOutlineButton = this.merchCard.locator('a.con-button.outline'); + this.footerOutlineButton2 = this.merchCard.locator('a.con-button.outline').nth(1); + this.footerBlueButton = this.merchCard.locator('a.con-button.blue').nth(0); + this.footerBlueButton2 = this.merchCard.locator('a.con-button.blue').nth(1); + + // merch-card attributes + this.attributes = { + segmentRibbon: { style: /background-color:\s*#EDCC2D;\s*color:\s*#000000;\s*/ }, + specialOfferRibbon: { style: /background-color:\s* #F68D2E;\s*color:\s*#000000;\s*/ }, + plansRibbon: { style: /background-color:\s*#EDCC2D;\s*color:\s*#000000;\s*/ }, + }; + } +} diff --git a/tests/milo/merchcard.block.test.js b/tests/milo/merchcard.block.test.js index b19a7efd..4b416776 100644 --- a/tests/milo/merchcard.block.test.js +++ b/tests/milo/merchcard.block.test.js @@ -1,425 +1,414 @@ -import { expect, test } from '@playwright/test'; -import { WebUtil } from '../../libs/webutil.js'; -import { features } from '../../features/milo/merchcard.block.spec.js'; -import MerchCard from '../../selectors/milo/merchcard.block.page.js'; - -let merchCard; -let webUtil; - -const miloLibs = process.env.MILO_LIBS || ''; - -test.describe('Milo Modal feature test suite', () => { - test.beforeEach(async ({ page }) => { - merchCard = new MerchCard(page); - webUtil = new WebUtil(page); - }); - - // Test 0 : Merch Card (Segment) - test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`); - const data = features[0].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[0].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[0].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card content/specs', async () => { - await expect(await merchCard.segment).toBeVisible(); - await expect(await merchCard.segmentTitle).toContainText(data.title); - - //await expect(await merchCard.price).toContainText(data.price); - //await expect(await merchCard.strikethroughPrice).toContainText(data.strikethroughPrice); - - await expect(await merchCard.segmentDescription1).toContainText(data.description); - await expect(await merchCard.linkText1).toContainText(data.link1Text); - await expect(await merchCard.linkText2).toContainText(data.link2Text); - - await expect(await merchCard.footer).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - - }); - }); - - // Test 1 : Merch Card (Segment) with Badge - test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`); - const data = features[1].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[1].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card with Badge content/specs', async () => { - await expect(await merchCard.segment).toBeVisible(); - await expect(await merchCard.segmentTitle).toContainText(data.title); - - await expect(await merchCard.segmentRibbon).toBeVisible(); - await expect(await merchCard.segmentRibbon).toContainText(data.badgeText); - - //await expect(await merchCard.price).toContainText(data.price); - //await expect(await merchCard.strikethroughPrice).toContainText(data.strikethroughPrice); - - await expect(await merchCard.segmentDescription1).toContainText(data.description); - await expect(await merchCard.linkText1).toContainText(data.link1Text); - await expect(await merchCard.linkText2).toContainText(data.link2Text); - - await expect(await merchCard.footer).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - }); - - await test.step('step-3: Verify Merch Card attributes', async () => { - await expect(await merchCard.segmentRibbon).toHaveAttribute('style', merchCard.attributes['segmentRibbon']['style']); - - }); - }); - - // Test 2 : Merch Card (Special Offers) - test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`); - const data = features[2].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[2].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.sepcialOffers).toBeVisible(); - await expect(await merchCard.sepcialOffersImage).toBeVisible(); - - //await expect(await merchCard.sepcialOffersTitleH4).toBeVisible(); - await expect(await merchCard.sepcialOffersTitleH4).toContainText(data.titleH4); - await expect(await merchCard.sepcialOffersTitleH3).toContainText(data.titleH3); - - await expect(await merchCard.sepcialOffersDescription1).toContainText(data.description1); - await expect(await merchCard.sepcialOffersDescription2).toContainText(data.description2); - - await expect(await merchCard.footer).toBeVisible(); - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - }); - }); - - // Test 3 : Merch Card (Special Offers) with badge - test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[3].path}${miloLibs}`); - const data = features[3].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[3].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[3].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.sepcialOffers).toBeVisible(); - await expect(await merchCard.sepcialOffersImage).toBeVisible(); - - await expect(await merchCard.sepcialOffersRibbon).toBeVisible(); - await expect(await merchCard.sepcialOffersRibbon).toContainText(data.badgeText); - - //await expect(await merchCard.sepcialOffersTitleH4).toContainText(data.titleH4); - await expect(await merchCard.sepcialOffersTitleH3).toContainText(data.titleH3); - - await expect(await merchCard.sepcialOffersDescription2).toContainText(data.description); - await expect(await merchCard.seeTermsTextLink).toContainText(data.link1Text); - - await expect(await merchCard.footer).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - }); - - await test.step('step-3: Verify Merch Card attributes', async () => { - await expect(await merchCard.sepcialOffersRibbon).toHaveAttribute('style', merchCard.attributes['specialOfferRibbon']['style']); - - }); - }); - - // Test 4 : Merch Card (plans) - test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[4].path}${miloLibs}`); - const data = features[4].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[4].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[4].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.plans).toBeVisible(); - await expect(await merchCard.productIcon).toBeVisible(); - - await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); - - //await expect(await merchCard.price).toContainText(data.price); - await expect(await merchCard.plansCardDescription2).toContainText(data.description); - await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - }); - }); - - // Test 5 : Merch Card (plans) with badge - test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[5].path}${miloLibs}`); - const data = features[5].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[5].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[5].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.plans).toBeVisible(); - await expect(await merchCard.productIcon).toBeVisible(); - - await expect(await merchCard.plansRibbon).toBeVisible(); - await expect(await merchCard.plansRibbon).toContainText(data.badgeText); - - await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); - - //await expect(await merchCard.price).toContainText(data.price); - await expect(await merchCard.plansCardDescription2).toContainText(data.description); - await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); - }); - }); - - // Test 6 : Merch Card (plans) with secure - // Note: skipping the test as there were failures, informed the team - test.skip(`${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[6].path}${miloLibs}`); - const data = features[6].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[6].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[6].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.plans).toBeVisible(); - await expect(await merchCard.productIcon).toBeVisible(); - - await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); - - //await expect(await merchCard.price).toContainText(data.price); - await expect(await merchCard.plansCardDescription2).toContainText(data.description); - await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); - - await expect(await merchCard.footerBlueButton2).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton2Text); - - await expect(await merchCard.footerCheckbox).toBeVisible(); - await expect(await merchCard.footerCheckboxLabel).toContainText(data.checkboxLabel); - - await expect(await merchCard.secureTransactionIcon).toBeVisible(); - await expect(await merchCard.secureTransactionLabel).toContainText(data.secureLabel); - }); - - await test.step('step-3: Click the check box and verify the free trial button', async () => { - await merchCard.footerCheckbox.click(); - - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - }); - - }); - - // Test 7 : Merch Card (plans, secure) with badge - // Note: skipping the test as there were failures, informed the team - test.skip(`${features[7].name},${features[7].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[7].path}${miloLibs}`); - const data = features[7].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[7].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[7].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card special offers content/specs', async () => { - await expect(await merchCard.plans).toBeVisible(); - await expect(await merchCard.productIcon).toBeVisible(); - - await expect(await merchCard.plansRibbon).toBeVisible(); - await expect(await merchCard.plansRibbon).toContainText(data.badgeText); - - await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); - - //await expect(await merchCard.price).toContainText(data.price); - await expect(await merchCard.plansCardDescription2).toContainText(data.description); - await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); - - await expect(await merchCard.footerCheckbox).toBeVisible(); - await expect(await merchCard.footerCheckboxLabel).toContainText(data.checkboxLabel); - - await expect(await merchCard.secureTransactionIcon).toBeVisible(); - await expect(await merchCard.secureTransactionLabel).toContainText(data.secureLabel); - }); - - await test.step('step-3: Click the check box and verify the free trial button', async () => { - await merchCard.footerCheckbox.click(); - - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - }); - }); - - // Test 8 : Merch Card (catalog) - test(`${features[8].name},${features[8].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[8].path}${miloLibs}`); - const data = features[8].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[8].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[8].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card catalog content/specs', async () => { - await expect(await merchCard.catalog).toBeVisible(); - await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); - - //await expect(await merchCard.price).toContainText(data.price); - - await expect(await merchCard.catalogCardDescription2).toContainText(data.description); - await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); - await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); - - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - }); - }); - - // Test 9 : Merch Card (catalog) with badge - test(`${features[9].name},${features[9].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[9].path}${miloLibs}`); - const data = features[9].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[9].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[9].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card catalog with badge content/specs', async () => { - await expect(await merchCard.catalog).toBeVisible(); - - await expect(await merchCard.catalog).toHaveAttribute('badge-background-color', data.badgeBgColor); - await expect(await merchCard.catalog).toHaveAttribute('badge-color', data.badgeColor);; - await expect(await merchCard.catalog).toHaveAttribute('badge-text', data.badgeText); - - await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); - - //await expect(await merchCard.price).toContainText(data.price); - - await expect(await merchCard.catalogCardDescription2).toContainText(data.description); - await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); - await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); - - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - }); - }); - - // Test 10 : Merch Card (catalog) with more info and badge - test(`${features[10].name},${features[10].tags}`, async ({ page, baseURL }) => { - console.info(`[Test Page]: ${baseURL}${features[10].path}${miloLibs}`); - const data = features[10].data; - - await test.step('step-1: Go to Merch Card feature test page', async () => { - await page.goto(`${baseURL}${features[10].path}${miloLibs}`); - await page.waitForLoadState('domcontentloaded'); - await expect(page).toHaveURL(`${baseURL}${features[10].path}${miloLibs}`); - }); - - await test.step('step-2: Verify Merch Card catalog with badge content/specs', async () => { - await expect(await merchCard.catalog).toBeVisible(); - - await expect(await merchCard.catalog).toHaveAttribute('badge-background-color', data.badgeBgColor); - await expect(await merchCard.catalog).toHaveAttribute('badge-color', data.badgeColor);; - await expect(await merchCard.catalog).toHaveAttribute('badge-text', data.badgeText); - - await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); - await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); - - //await expect(await merchCard.price).toContainText(data.price); - - await expect(await merchCard.catalogCardDescription2).toContainText(data.description); - await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); - await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); - - await expect(await merchCard.footer).toBeVisible(); - - await expect(await merchCard.footerBlueButton).toBeVisible(); - await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); - - await expect(await merchCard.footerOutlineButton).toBeVisible(); - await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); - }); - - await test.step('step-3: click more info link and verify action menu list', async () => { - await merchCard.catalog.hover(); - await merchCard.catalog.click(); - await page.waitForTimeout(1000); - - await expect(await merchCard.catalogActionMenuList).toHaveCount(data.actionMenuListCount); - await expect(await merchCard.catalogActionMenuPText1).toContainText(data.actionMenuText1); - await expect(await merchCard.catalogActionMenuPText2).toContainText(data.actionMenuText2); - await expect(await merchCard.catalogActionMenuPText3).toContainText(data.actionMenuText3); - }); - }); - -}); +import { expect, test } from '@playwright/test'; +import { features } from '../../features/milo/merchcard.block.spec.js'; +import MerchCard from '../../selectors/milo/merchcard.block.page.js'; + +let merchCard; + +const miloLibs = process.env.MILO_LIBS || ''; + +test.describe('Milo Modal feature test suite', () => { + test.beforeEach(async ({ page }) => { + merchCard = new MerchCard(page); + }); + + // Test 0 : Merch Card (Segment) + test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`); + const { data } = features[0]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[0].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[0].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card content/specs', async () => { + await expect(await merchCard.segment).toBeVisible(); + await expect(await merchCard.segmentTitle).toContainText(data.title); + + // await expect(await merchCard.price).toContainText(data.price); + // await expect(await merchCard.strikethroughPrice).toContainText(data.strikethroughPrice); + + await expect(await merchCard.segmentDescription1).toContainText(data.description); + await expect(await merchCard.linkText1).toContainText(data.link1Text); + await expect(await merchCard.linkText2).toContainText(data.link2Text); + await expect(await merchCard.footer).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + }); + + // Test 1 : Merch Card (Segment) with Badge + test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`); + const { data } = features[1]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[1].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card with Badge content/specs', async () => { + await expect(await merchCard.segment).toBeVisible(); + await expect(await merchCard.segmentTitle).toContainText(data.title); + + await expect(await merchCard.segmentRibbon).toBeVisible(); + await expect(await merchCard.segmentRibbon).toContainText(data.badgeText); + + // await expect(await merchCard.price).toContainText(data.price); + // await expect(await merchCard.strikethroughPrice).toContainText(data.strikethroughPrice); + + await expect(await merchCard.segmentDescription1).toContainText(data.description); + await expect(await merchCard.linkText1).toContainText(data.link1Text); + await expect(await merchCard.linkText2).toContainText(data.link2Text); + + await expect(await merchCard.footer).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + + await test.step('step-3: Verify Merch Card attributes', async () => { + await expect(await merchCard.segmentRibbon).toHaveAttribute('style', merchCard.attributes.segmentRibbon.style); + }); + }); + + // Test 2 : Merch Card (Special Offers) + test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`); + const { data } = features[2]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[2].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.sepcialOffers).toBeVisible(); + await expect(await merchCard.sepcialOffersImage).toBeVisible(); + + await expect(await merchCard.sepcialOffersTitleH4).toBeVisible(); + await expect(await merchCard.sepcialOffersTitleH4).toContainText(data.titleH4); + await expect(await merchCard.sepcialOffersTitleH3).toContainText(data.titleH3); + + await expect(await merchCard.sepcialOffersDescription1).toContainText(data.description1); + await expect(await merchCard.sepcialOffersDescription2).toContainText(data.description2); + + await expect(await merchCard.footer).toBeVisible(); + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + }); + + // Test 3 : Merch Card (Special Offers) with badge + test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[3].path}${miloLibs}`); + const { data } = features[3]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[3].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[3].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.sepcialOffers).toBeVisible(); + await expect(await merchCard.sepcialOffersImage).toBeVisible(); + + await expect(await merchCard.sepcialOffersRibbon).toBeVisible(); + await expect(await merchCard.sepcialOffersRibbon).toContainText(data.badgeText); + + await expect(await merchCard.sepcialOffersTitleH3).toContainText(data.titleH3); + await expect(await merchCard.sepcialOffersTitleH4).toContainText(data.titleH4); + + await expect(await merchCard.sepcialOffersDescription1).toContainText(data.description); + await expect(await merchCard.seeTermsTextLink).toContainText(data.link1Text); + + await expect(await merchCard.footer).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + + await test.step('step-3: Verify Merch Card attributes', async () => { + await expect(await merchCard.sepcialOffersRibbon).toHaveAttribute('style', merchCard.attributes.specialOfferRibbon.style); + }); + }); + + // Test 4 : Merch Card (plans) + test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[4].path}${miloLibs}`); + const { data } = features[4]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[4].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[4].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.plans).toBeVisible(); + await expect(await merchCard.productIcon).toBeVisible(); + + await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); + + // await expect(await merchCard.price).toContainText(data.price); + await expect(await merchCard.plansCardDescription1).toContainText(data.description); + await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + }); + // Test 5 : Merch Card (plans) with badge + test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[5].path}${miloLibs}`); + const { data } = features[5]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[5].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[5].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.plans).toBeVisible(); + await expect(await merchCard.productIcon).toBeVisible(); + + await expect(await merchCard.plansRibbon).toBeVisible(); + await expect(await merchCard.plansRibbon).toContainText(data.badgeText); + + await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.plansCardTitleH4).toContainText(data.titleH4); + + // await expect(await merchCard.price).toContainText(data.price); + await expect(await merchCard.plansCardDescription2).toContainText(data.description); + await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButtonText); + }); + }); + + // Test 6 : Merch Card (plans) with secure + // Note: skipping the test as there were failures, informed the team + test.skip(`${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[6].path}${miloLibs}`); + const { data } = features[6]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[6].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[6].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.plans).toBeVisible(); + await expect(await merchCard.productIcon).toBeVisible(); + + await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); + + // await expect(await merchCard.price).toContainText(data.price); + await expect(await merchCard.plansCardDescription2).toContainText(data.description); + await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); + + await expect(await merchCard.footerBlueButton2).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton2Text); + + await expect(await merchCard.footerCheckbox).toBeVisible(); + await expect(await merchCard.footerCheckboxLabel).toContainText(data.checkboxLabel); + + await expect(await merchCard.secureTransactionIcon).toBeVisible(); + await expect(await merchCard.secureTransactionLabel).toContainText(data.secureLabel); + }); + + await test.step('step-3: Click the check box and verify the free trial button', async () => { + await merchCard.footerCheckbox.click(); + + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + }); + }); + + // Test 7 : Merch Card (plans, secure) with badge + // Note: skipping the test as there were failures, informed the team + test.skip(`${features[7].name},${features[7].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[7].path}${miloLibs}`); + const { data } = features[7]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[7].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[7].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card special offers content/specs', async () => { + await expect(await merchCard.plans).toBeVisible(); + await expect(await merchCard.productIcon).toBeVisible(); + + await expect(await merchCard.plansRibbon).toBeVisible(); + await expect(await merchCard.plansRibbon).toContainText(data.badgeText); + + await expect(await merchCard.plansCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.plansCardTitleH5).toContainText(data.titleH5); + + // await expect(await merchCard.price).toContainText(data.price); + await expect(await merchCard.plansCardDescription2).toContainText(data.description); + await expect(await merchCard.seePlansTextLink).toContainText(data.link1Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); + + await expect(await merchCard.footerCheckbox).toBeVisible(); + await expect(await merchCard.footerCheckboxLabel).toContainText(data.checkboxLabel); + + await expect(await merchCard.secureTransactionIcon).toBeVisible(); + await expect(await merchCard.secureTransactionLabel).toContainText(data.secureLabel); + }); + + await test.step('step-3: Click the check box and verify the free trial button', async () => { + await merchCard.footerCheckbox.click(); + + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + }); + }); + + // Test 8 : Merch Card (catalog) + test(`${features[8].name},${features[8].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[8].path}${miloLibs}`); + const { data } = features[8]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[8].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[8].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card catalog content/specs', async () => { + await expect(await merchCard.catalog).toBeVisible(); + await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); + + // await expect(await merchCard.price).toContainText(data.price); + + await expect(await merchCard.catalogCardDescription2).toContainText(data.description); + await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); + await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); + + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + }); + }); + + // Test 9 : Merch Card (catalog) with badge + test(`${features[9].name},${features[9].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[9].path}${miloLibs}`); + const { data } = features[9]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[9].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[9].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card catalog with badge content/specs', async () => { + await expect(await merchCard.catalog).toBeVisible(); + + await expect(await merchCard.catalog).toHaveAttribute('badge-background-color', data.badgeBgColor); + await expect(await merchCard.catalog).toHaveAttribute('badge-color', data.badgeColor); + await expect(await merchCard.catalog).toHaveAttribute('badge-text', data.badgeText); + + await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); + + // await expect(await merchCard.price).toContainText(data.price); + + await expect(await merchCard.catalogCardDescription2).toContainText(data.description); + await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); + await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); + + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + }); + }); + + // Test 10 : Merch Card (catalog) with more info and badge + test(`${features[10].name},${features[10].tags}`, async ({ page, baseURL }) => { + console.info(`[Test Page]: ${baseURL}${features[10].path}${miloLibs}`); + const { data } = features[10]; + + await test.step('step-1: Go to Merch Card feature test page', async () => { + await page.goto(`${baseURL}${features[10].path}${miloLibs}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${features[10].path}${miloLibs}`); + }); + + await test.step('step-2: Verify Merch Card catalog with badge content/specs', async () => { + await expect(await merchCard.catalog).toBeVisible(); + + await expect(await merchCard.catalog).toHaveAttribute('badge-background-color', data.badgeBgColor); + await expect(await merchCard.catalog).toHaveAttribute('badge-color', data.badgeColor); + await expect(await merchCard.catalog).toHaveAttribute('badge-text', data.badgeText); + + await expect(await merchCard.catalogCardTitleH3).toContainText(data.titleH3); + await expect(await merchCard.catalogCardTitleH4).toContainText(data.titleH4); + + // await expect(await merchCard.price).toContainText(data.price); + + await expect(await merchCard.catalogCardDescription2).toContainText(data.description); + await expect(await merchCard.seeWhatsIncludedTextLink).toContainText(data.link1Text); + await expect(await merchCard.learnMoreTextLink).toContainText(data.link2Text); + + await expect(await merchCard.footer).toBeVisible(); + + await expect(await merchCard.footerBlueButton).toBeVisible(); + await expect(await merchCard.footerBlueButton).toContainText(data.footerBlueButton1Text); + + await expect(await merchCard.footerOutlineButton).toBeVisible(); + await expect(await merchCard.footerOutlineButton).toContainText(data.footerOutlineButtonText); + }); + + await test.step('step-3: click more info link and verify action menu list', async () => { + await merchCard.catalog.hover(); + await merchCard.catalog.click(); + await page.waitForTimeout(1000); + + await expect(await merchCard.catalogActionMenuList).toHaveCount(data.actionMenuListCount); + await expect(await merchCard.catalogActionMenuPText1).toContainText(data.actionMenuText1); + await expect(await merchCard.catalogActionMenuPText2).toContainText(data.actionMenuText2); + await expect(await merchCard.catalogActionMenuPText3).toContainText(data.actionMenuText3); + }); + }); +});