diff --git a/cypress/e2e/default/learn/responsive-web-design/intro-page.ts b/cypress/e2e/default/learn/responsive-web-design/intro-page.ts deleted file mode 100644 index bae7a815948..00000000000 --- a/cypress/e2e/default/learn/responsive-web-design/intro-page.ts +++ /dev/null @@ -1,41 +0,0 @@ -const introPageSelectors = { - firstBlock: '[data-cy="learn-html-by-building-a-cat-photo-app"]' -}; - -describe('Certification intro page', () => { - before(() => { - cy.task('seed'); - cy.login(); - }); - - it('Should render and toggle correctly', () => { - cy.visit('/learn/2022/responsive-web-design'); - cy.title().should( - 'eq', - 'Responsive Web Design Certification | freeCodeCamp.org' - ); - cy.contains( - "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages" - ).should('be.visible'); - - // First block should be expanded - cy.contains( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ).should('be.visible'); - - // Second block should be closed - cy.contains( - 'CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.' - ).should('not.exist'); - - // Block should handle toggle clicks correctly - cy.get(introPageSelectors.firstBlock).click(); - cy.contains( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ).should('not.exist'); - cy.get(introPageSelectors.firstBlock).click(); - cy.contains( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ).should('be.visible'); - }); -}); diff --git a/e2e/intro-page-rwd.spec.ts b/e2e/intro-page-rwd.spec.ts new file mode 100644 index 00000000000..42994483b0c --- /dev/null +++ b/e2e/intro-page-rwd.spec.ts @@ -0,0 +1,47 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Certification intro page', () => { + test('Should render and toggle correctly', async ({ page }) => { + const title = page.getByRole('button', { + name: 'Learn HTML by Building a Cat Photo App' + }); + + await page.goto('/learn/2022/responsive-web-design'); + + await expect(page).toHaveTitle( + 'Responsive Web Design Certification | freeCodeCamp.org' + ); + + await expect( + page.getByText( + "this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages" + ) + ).toBeVisible(); + + await expect( + page.getByText( + 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' + ) + ).toBeVisible(); + + await expect( + page.getByText( + 'CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.' + ) + ).not.toBeVisible(); + + await title.click(); + await expect( + page.getByText( + 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' + ) + ).not.toBeVisible(); + + await title.click(); + await expect( + page.getByText( + 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' + ) + ).toBeVisible(); + }); +});