50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test('#3 Verify Apply now and Learn more buttons do not overlap in mobile view', async ({ page }) => {
|
|
// Go to the careers page with job listings
|
|
await page.goto('https://careers-page.com/linkstalent?mode=preview#openings', { waitUntil: 'domcontentloaded' });
|
|
|
|
// Emulate a typical mobile viewport size (e.g., iPhone 12)
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
|
|
// Wait for job cards to load
|
|
await page.waitForSelector('.job-element-in-list-footer');
|
|
|
|
// Get all job cards footer sections containing buttons
|
|
const footers = await page.$$('.job-element-in-list-footer');
|
|
|
|
for (const footer of footers) {
|
|
const applyBtn = await footer.$('a.btn-primary.btn-xs');
|
|
const learnMoreBtn = await footer.$('a.btn.btn-view-job');
|
|
|
|
expect(applyBtn).not.toBeNull();
|
|
expect(learnMoreBtn).not.toBeNull();
|
|
|
|
// Check if both buttons are visible
|
|
expect(await applyBtn!.isVisible()).toBe(true);
|
|
expect(await learnMoreBtn!.isVisible()).toBe(true);
|
|
|
|
// Get bounding boxes of both buttons
|
|
const applyBox = await applyBtn!.boundingBox();
|
|
const learnMoreBox = await learnMoreBtn!.boundingBox();
|
|
|
|
expect(applyBox).not.toBeNull();
|
|
expect(learnMoreBox).not.toBeNull();
|
|
|
|
if (applyBox && learnMoreBox) {
|
|
// Check buttons do not overlap by verifying horizontal space
|
|
const overlapHorizontally =
|
|
Math.max(applyBox.x, learnMoreBox.x) <
|
|
Math.min(applyBox.x + applyBox.width, learnMoreBox.x + learnMoreBox.width);
|
|
|
|
// Check buttons do not overlap vertically as well (just in case)
|
|
const overlapVertically =
|
|
Math.max(applyBox.y, learnMoreBox.y) <
|
|
Math.min(applyBox.y + applyBox.height, learnMoreBox.y + learnMoreBox.height);
|
|
|
|
// Assert no overlap on both axes
|
|
expect(overlapHorizontally && overlapVertically).toBe(false);
|
|
}
|
|
}
|
|
});
|