Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // @ts-check
const { expect } = require('@playwright/test');
const { BasePage } = require('./BasePage');
const { HeaderComponent } = require('./components/HeaderComponent');
const { environment } = require('../config/environment');
/**
* ContactUsPage POM handles interaction with the Contact Us form (Test Case 6).
*/
class ContactUsPage extends BasePage {
/**
* @param {import('@playwright/test').Page} page
*/
constructor(page) {
super(page);
this.header = new HeaderComponent(page);
this.getInTouchHeading = page.locator('.contact-form h2.title');
this.nameInput = page.locator('input[data-qa="name"]');
this.emailInput = page.locator('input[data-qa="email"]');
this.subjectInput = page.locator('input[data-qa="subject"]');
this.messageInput = page.locator('textarea[data-qa="message"]');
this.uploadFileInput = page.locator('input[name="upload_file"]');
this.submitButton = page.locator('input[data-qa="submit-button"]');
this.successAlert = page.locator('.status.alert-success');
this.homeButton = page.locator('#form-section a.btn-success, #contact-page a.btn-success');
}
/**
* Navigates directly to /contact_us
*/
async navigate() {
await this.goto(environment.routes.contactUs);
await this.verifyLoaded();
}
/**
* Verifies the contact us page loaded with GET IN TOUCH heading.
*/
async verifyLoaded() {
await expect(this.page).toHaveURL(new RegExp(`${environment.routes.contactUs}$`));
await expect(this.getInTouchHeading).toBeVisible();
await expect(this.getInTouchHeading).toHaveText('Get In Touch', { ignoreCase: true });
}
/**
* Fills out the contact form.
* @param {{ name: string, email: string, subject: string, message: string }} data
*/
async fillContactForm({ name, email, subject, message }) {
await this.nameInput.fill(name);
await this.emailInput.fill(email);
await this.subjectInput.fill(subject);
await this.messageInput.fill(message);
}
/**
* Uploads an attachment file.
* @param {string} filePath
*/
async uploadFile(filePath) {
await this.uploadFileInput.setInputFiles(filePath);
}
/**
* Submits the form and accepts the browser confirmation dialog.
*/
async submitForm() {
this.page.on('dialog', async (dialog) => {
await dialog.accept();
});
await this.submitButton.scrollIntoViewIfNeeded();
await this.submitButton.click();
// Fallback: If website's inline jQuery event listener was delayed, dispatch submit
try {
await this.successAlert.waitFor({ state: 'visible', timeout: 3000 });
} catch {
await this.page.evaluate(() => {
window.confirm = () => true;
const form = document.querySelector('#contact-us-form');
if (form) {
if (window.jQuery) {
window.jQuery(form).trigger('submit');
} else {
form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
}
}
});
}
}
/**
* Asserts the success message appears after submission.
*/
async verifySuccessMessage() {
await expect(this.successAlert).toBeVisible({ timeout: 10000 });
await expect(this.successAlert).toContainText('Success! Your details have been submitted successfully.');
}
/**
* Clicks 'Home' button after contact submission.
*/
async clickHomeButton() {
await this.homeButton.scrollIntoViewIfNeeded();
await this.homeButton.click();
}
}
module.exports = { ContactUsPage };
|