-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from brunomachadors/23-add-automated-tests-and…
…-test-ids-for-about-page feat(tests): Improve About Page tests and update validation steps
- Loading branch information
Showing
10 changed files
with
268 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { test } from '@playwright/test'; | ||
| import { AboutPage } from './pages/AboutPage'; | ||
| import { ABOUT_DATA } from './data/test-data'; | ||
|
|
||
| test.describe('About Page', () => { | ||
| test('Content', async ({ page }) => { | ||
| const aboutPage = new AboutPage(page); | ||
|
|
||
| await test.step('Navigate', async () => { | ||
| await aboutPage.navigateToAbout(); | ||
| await aboutPage.validatePageLoaded(); | ||
| }); | ||
|
|
||
| await test.step('Container', async () => { | ||
| await aboutPage.validateAboutContainer(); | ||
| }); | ||
|
|
||
| await test.step('Title', async () => { | ||
| await aboutPage.validateAboutTitle(ABOUT_DATA.aboutTitle); | ||
| }); | ||
|
|
||
| await test.step('Description', async () => { | ||
| await aboutPage.validateAboutDescription(ABOUT_DATA.aboutDescription); | ||
| }); | ||
|
|
||
| await test.step('Resume Button', async () => { | ||
| await aboutPage.validateResumeButton('Go to Resume'); | ||
| }); | ||
|
|
||
| for (let i = 0; i < ABOUT_DATA.sections.length; i++) { | ||
| const { title, content } = ABOUT_DATA.sections[i]; | ||
|
|
||
| await test.step(`Section ${i}: ${title}`, async () => { | ||
| await aboutPage.clickToggleIcon(i); | ||
| await aboutPage.validateSectionTitleVisible(i, title); | ||
| await aboutPage.validateSectionContentVisible(i, content); | ||
| }); | ||
| } | ||
| }); | ||
| }); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| // Home Page Data | ||
| export const HOME_DATA = { | ||
| title: 'Welcome to my Portfolio', | ||
| subtitle: 'Explore my skills, experience, and projects as a QA Engineer.', | ||
| startButtonText: 'Start here', | ||
| }; | ||
|
|
||
| // Footer Data | ||
| export const FOOTER_DATA = { | ||
| links: ['instagram', 'linkedin', 'github', 'medium', 'email'], | ||
| }; | ||
|
|
||
| // Header Data | ||
| export const HEADER_DATA = { | ||
| menuOptions: [ | ||
| 'home', | ||
| 'about', | ||
| 'resume', | ||
| 'skills', | ||
| 'projects', | ||
| 'posts', | ||
| 'contacts', | ||
| ], | ||
| }; | ||
|
|
||
| export const ABOUT_DATA = { | ||
| aboutTitle: 'About Me', | ||
| aboutDescription: | ||
| "I'm Bruno Machado, a QA Engineer passionate about software development, test automation, accessibility, and Shift Left practices.", | ||
| sections: [ | ||
| { | ||
| title: 'Personal Information', | ||
| content: [ | ||
| 'Location: Porto, Portugal', | ||
| 'Nationality: Brazilian', | ||
| 'Year of Birth: 1986', | ||
| ], | ||
| }, | ||
| { | ||
| title: 'My Journey into QA', | ||
| content: | ||
| 'I started working in QA by chance and quickly realized that I have a strong aptitude for it. With over 17 years of experience in testing, I have specialized in test automation since 2017.', | ||
| }, | ||
| { | ||
| title: 'Focus on Shift Left Practices', | ||
| content: | ||
| 'I actively promote early involvement of QA in the development process, collaborating with developers to implement test frameworks and identify potential issues before they arise.', | ||
| }, | ||
| { | ||
| title: 'Collaboration and Mentoring', | ||
| content: | ||
| 'I value building strong relationships with colleagues, fostering a collaborative work environment, and mentoring professionals in the testing field.', | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { Page, expect } from '@playwright/test'; | ||
|
|
||
| export class AboutPage { | ||
| readonly page: Page; | ||
|
|
||
| constructor(page: Page) { | ||
| this.page = page; | ||
| } | ||
|
|
||
| async navigateToAbout() { | ||
| await this.page.goto('/about', { waitUntil: 'commit' }); | ||
| } | ||
|
|
||
| async validatePageLoaded() { | ||
| const imageLocator = this.page.getByRole('img', { name: 'Bruno Machado' }); | ||
| await expect(imageLocator).toBeVisible(); | ||
| } | ||
|
|
||
| async validateAboutTitle(expectedTitle: string) { | ||
| const titleLocator = this.page.locator('[data-test-id="about-title"]'); | ||
| await expect(titleLocator).toBeVisible(); | ||
| await expect(titleLocator).toHaveText(expectedTitle); | ||
| } | ||
|
|
||
| async validateAboutDescription(expectedDescription: string) { | ||
| const descriptionLocator = this.page.locator( | ||
| '[data-test-id="about-description"]' | ||
| ); | ||
| await expect(descriptionLocator).toBeVisible(); | ||
| await expect(descriptionLocator).toHaveText(expectedDescription); | ||
| } | ||
|
|
||
| async validateResumeButton(expectedText: string) { | ||
| const buttonLocator = this.page.locator('[data-test-id="resume-button"]'); | ||
| await expect(buttonLocator).toBeVisible({ timeout: 5000 }); | ||
| await expect(buttonLocator).toHaveText(expectedText); | ||
| } | ||
|
|
||
| async validateAboutContainer() { | ||
| const containerLocator = this.page.locator( | ||
| '[data-test-id="about-container"]' | ||
| ); | ||
| await expect(containerLocator).toBeVisible(); | ||
| } | ||
|
|
||
| async clickToggleIcon(index: number) { | ||
| const toggleIcon = this.page.locator( | ||
| `[data-test-id="toggle-icon-${index}"]` | ||
| ); | ||
| await toggleIcon.click(); | ||
|
|
||
| const contentLocator = this.page.locator( | ||
| `[data-test-id="section-content-${index}"]` | ||
| ); | ||
| await this.page.waitForTimeout(300); | ||
| if (!(await contentLocator.isVisible())) { | ||
| await toggleIcon.click(); | ||
| await this.page.waitForTimeout(300); | ||
| } | ||
| } | ||
|
|
||
| async validateSectionTitleVisible(index: number, expectedTitle: string) { | ||
| const titleLocator = this.page.locator( | ||
| `[data-test-id="section-title-${index}"]` | ||
| ); | ||
| await expect(titleLocator).toBeVisible(); | ||
| await expect(titleLocator).toHaveText(expectedTitle); | ||
| } | ||
|
|
||
| async validateSectionContentVisible( | ||
| index: number, | ||
| expectedContent: string | string[] | ||
| ) { | ||
| const contentLocator = this.page.locator( | ||
| `[data-test-id="section-content-${index}"]` | ||
| ); | ||
|
|
||
| if (!(await contentLocator.isVisible())) { | ||
| await this.clickToggleIcon(index); | ||
| } | ||
|
|
||
| await expect(contentLocator).toBeVisible(); | ||
|
|
||
| if (Array.isArray(expectedContent)) { | ||
| for (let i = 0; i < expectedContent.length; i++) { | ||
| const lineLocator = contentLocator.locator( | ||
| `[data-test-id="section-content-${index}-line-${i}"]` | ||
| ); | ||
| await expect(lineLocator).toHaveText(expectedContent[i]); | ||
| } | ||
| } else { | ||
| await expect(contentLocator).toHaveText(expectedContent); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.