diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index 8e21c096660..6952b15dc3e 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -288,6 +288,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
certMonth + 1
}&certUrl=${certURL}`}
target='_blank'
+ data-playwright-test-label='linkedin-share-btn'
>
{t('profile.add-linkedin')}
@@ -301,6 +302,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
certURL: certURL
})}`}
target='_blank'
+ data-playwright-test-label='twitter-share-btn'
>
{t('profile.add-twitter')}
@@ -342,15 +344,20 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
{{ user: displayName }}
- placeholder
-
+
+ placeholder
+
+
{{
title: t(`certification.title.${certTitle}`, certTitle)
}}
-
+
{{
time: certDate.toLocaleString([localeCode, 'en-US'], {
year: 'numeric',
diff --git a/e2e/show-certificate-else.spec.ts b/e2e/show-certificate-else.spec.ts
index 03eedfdac7f..1c661bd266a 100644
--- a/e2e/show-certificate-else.spec.ts
+++ b/e2e/show-certificate-else.spec.ts
@@ -12,17 +12,16 @@ test.describe('Show certification else', () => {
await page.close();
});
- test('while viewing someone else, should display certificate', async () => {
- expect(await page.isVisible('text=successfully completed')).toBeTruthy();
- expect(await page.isVisible('text=Responsive Web Design')).toBeTruthy();
+ test('while viewing someone else, should display the certificate information', async () => {
+ await expect(page.getByTestId('successful-completion')).toBeVisible();
+ await expect(page.getByTestId('certification-title')).toBeVisible();
+ await expect(page.getByTestId('issue-date')).toContainText(
+ 'Developer Certification on August 3, 2018'
+ );
});
test('while viewing someone else, should not render a LinkedIn button and Twitter button', async () => {
- await expect(
- page.locator('text=Add this certification to my LinkedIn profile')
- ).toBeHidden();
- await expect(
- page.locator('text=Share this certification on Twitter')
- ).toBeHidden();
+ await expect(page.getByTestId('linkedin-share-btn')).toBeHidden();
+ await expect(page.getByTestId('twitter-share-btn')).toBeHidden();
});
});
diff --git a/e2e/show-certificate-own.spec.ts b/e2e/show-certificate-own.spec.ts
index 322e8091e7c..7b2b87d38f3 100644
--- a/e2e/show-certificate-own.spec.ts
+++ b/e2e/show-certificate-own.spec.ts
@@ -14,20 +14,16 @@ test.describe('Show certification own', () => {
await page.close();
});
- test('should display certificate details', async () => {
- await expect(page.getByText('successfully completed')).toBeVisible();
- await expect(page.getByText('Responsive Web Design')).toBeVisible();
- await expect(page.locator('[data-cy=issue-date]')).toContainText(
+ test('should display the certificate details', async () => {
+ await expect(page.getByTestId('successful-completion')).toBeVisible();
+ await expect(page.getByTestId('certification-title')).toBeVisible();
+ await expect(page.getByTestId('issue-date')).toContainText(
'Developer Certification on August 3, 2018'
);
});
- test('should render LinkedIn and Twitter buttons', async () => {
- await expect(
- page.getByText('Add this certification to my LinkedIn profile')
- ).toBeVisible();
- await expect(
- page.getByText('Share this certification on Twitter')
- ).toBeVisible();
+ test('should render and display LinkedIn and Twitter buttons', async () => {
+ await expect(page.getByTestId('linkedin-share-btn')).toBeVisible();
+ await expect(page.getByTestId('twitter-share-btn')).toBeVisible();
});
});