多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

371 lines
10 KiB

// playwright-dev-page.ts
import { Locator, expect } from "@playwright/test";
import { DashboardPage } from "..";
import BasePage from "../../Base";
import { ToolbarPage } from "../common/Toolbar";
export class FormPage extends BasePage {
readonly dashboard: DashboardPage;
readonly toolbar: ToolbarPage;
readonly addAllButton: Locator;
readonly removeAllButton: Locator;
readonly submitButton: Locator;
readonly showAnotherFormRadioButton: Locator;
readonly showAnotherFormAfter5SecRadioButton: Locator;
readonly emailMeRadioButton: Locator;
readonly formHeading: Locator;
readonly formSubHeading: Locator;
readonly afterSubmitMsg: Locator;
constructor(dashboard: DashboardPage) {
super(dashboard.rootPage);
this.dashboard = dashboard;
this.toolbar = new ToolbarPage(this);
this.addAllButton = dashboard.get().locator('[data-pw="nc-form-add-all"]');
this.removeAllButton = dashboard
.get()
.locator('[data-pw="nc-form-remove-all"]');
this.submitButton = dashboard.get().locator('[data-pw="nc-form-submit"]');
this.showAnotherFormRadioButton = dashboard
.get()
.locator('[data-pw="nc-form-checkbox-submit-another-form"]');
this.showAnotherFormAfter5SecRadioButton = dashboard
.get()
.locator('[data-pw="nc-form-checkbox-show-blank-form"]');
this.emailMeRadioButton = dashboard
.get()
.locator('[data-pw="nc-form-checkbox-send-email"]');
this.formHeading = dashboard.get().locator('[data-pw="nc-form-heading"]');
this.formSubHeading = dashboard
.get()
.locator('[data-pw="nc-form-sub-heading"]');
this.afterSubmitMsg = dashboard
.get()
.locator('[data-pw="nc-form-after-submit-msg"]');
}
/*
data-pw="nc-form-wrapper-submit"
data-pw="nc-form-wrapper"
data-pw="nc-form-heading"
data-pw="nc-form-sub-heading"
data-pw="nc-form-field"
data-pw="nc-form-input-label"
data-pw="nc-field-remove-icon"
data-pw="nc-form-input-required"
data-pw="nc-form-input-label"
data-pw="nc-form-input-help-text"
:data-pw="`nc-form-input-${element.title.replaceAll(' ', '')}`"
data-pw="nc-form-submit"
data-pw="nc-form-after-submit-msg"
data-pw="nc-form-checkbox-submit-another-form"
data-pw="nc-form-checkbox-show-blank-form"
data-pw="nc-form-checkbox-send-email"
data-pw="nc-form-add-all"
data-pw="nc-form-remove-all"
:data-pw="`nc-form-hidden-column-${element.label}`"
data-pw="nc-drag-n-drop-to-hide"
*/
get() {
return this.dashboard.get().locator('[data-pw="nc-form-wrapper"]');
}
getFormAfterSubmit() {
return this.dashboard.get().locator('[data-pw="nc-form-wrapper-submit"]');
}
getFormHiddenColumn() {
return this.get().locator('[data-pw="nc-form-hidden-column"]');
}
getFormFields() {
return this.get().locator('[data-pw="nc-form-fields"]');
}
getDragNDropToHide() {
return this.get().locator('[data-pw="nc-drag-n-drop-to-hide"]');
}
getFormFieldsRemoveIcon() {
return this.get().locator('[data-pw="nc-field-remove-icon"]');
}
getFormFieldsRequired() {
return this.get().locator('[data-pw="nc-form-input-required"]');
}
getFormFieldsInputLabel() {
return this.get().locator('input[data-pw="nc-form-input-label"]:visible');
}
getFormFieldsInputHelpText() {
return this.get().locator(
'input[data-pw="nc-form-input-help-text"]:visible'
);
}
///////////////////////////
// Form Actions
async verifyFormFieldLabel({
index,
label,
}: {
index: number;
label: string;
}) {
await expect(
await this.getFormFields()
.nth(index)
.locator('[data-pw="nc-form-input-label"]')
).toContainText(label);
}
async verifyFormFieldHelpText({
index,
helpText,
}: {
index: number;
helpText: string;
}) {
await expect(
await this.getFormFields()
.nth(index)
.locator('[pw-data="nc-form-input-help-text-label"]')
).toContainText(helpText);
}
async verifyFieldsIsEditable({ index }: { index: number }) {
await expect(await this.getFormFields().nth(index)).toHaveClass(
/nc-editable/
);
}
async verifyAfterSubmitMsg({ msg }: { msg: string }) {
await expect(
(await this.afterSubmitMsg.inputValue()).includes(msg)
).toBeTruthy();
}
async verifyFormViewFieldsOrder({ fields }: { fields: string[] }) {
let fieldLabels = await this.get().locator(
'[data-pw="nc-form-input-label"]'
);
await expect(await fieldLabels).toHaveCount(fields.length);
for (let i = 0; i < fields.length; i++) {
await expect(await fieldLabels.nth(i)).toContainText(fields[i]);
}
}
async reorderFields({
sourceField,
destinationField,
}: {
sourceField: string;
destinationField: string;
}) {
await expect(
await this.get().locator(`.nc-form-drag-${sourceField}`)
).toBeVisible();
await expect(
await this.get().locator(`.nc-form-drag-${destinationField}`)
).toBeVisible();
let src = await this.get().locator(
`.nc-form-drag-${sourceField.replace(" ", "")}`
);
let dst = await this.get().locator(
`.nc-form-drag-${destinationField.replace(" ", "")}`
);
await src.dragTo(dst);
}
async removeField({ field, mode }: { mode: string; field: string }) {
if (mode === "dragDrop") {
let src = await this.get().locator(
`.nc-form-drag-${field.replace(" ", "")}`
);
let dst = await this.get().locator(`[data-pw="nc-drag-n-drop-to-hide"]`);
await src.dragTo(dst);
} else if (mode === "hideField") {
let src = await this.get().locator(
`.nc-form-drag-${field.replace(" ", "")}`
);
await src.locator(`[data-pw="nc-field-remove-icon"]`).click();
}
}
async addField({ field, mode }: { mode: string; field: string }) {
if (mode === "dragDrop") {
let src = await this.get().locator(
`[data-pw="nc-form-hidden-column-${field}"]`
);
let dst = await this.get().locator(`.nc-form-drag-Country`);
await src.dragTo(dst);
} else if (mode === "clickField") {
let src = await this.get().locator(
`[data-pw="nc-form-hidden-column-${field}"]`
);
await src.click();
}
}
async removeAllFields() {
await this.removeAllButton.click();
}
async addAllFields() {
await this.addAllButton.click();
}
async configureHeader(param: { subtitle: string; title: string }) {
await this.formHeading.fill(param.title);
await this.formSubHeading.fill(param.subtitle);
}
async verifyHeader(param: { subtitle: string; title: string }) {
await expect.poll(async() => await this.formHeading.inputValue()).toBe(param.title);
await expect.poll(async() => await this.formSubHeading.inputValue()).toBe(param.subtitle);
}
async fillForm(param: { field: string; value: string }[]) {
for (let i = 0; i < param.length; i++) {
await this.get()
.locator(
`[data-pw="nc-form-input-${param[i].field.replace(
" ",
""
)}"] >> input`
)
.fill(param[i].value);
}
}
async configureField({
field,
required,
label,
helpText,
}: {
field: string;
required: boolean;
label: string;
helpText: string;
}) {
await this.get()
.locator(`.nc-form-drag-${field.replace(" ", "")}`)
.locator('div[data-pw="nc-form-input-label"]')
.click();
await this.getFormFieldsInputLabel().fill(label);
await this.getFormFieldsInputHelpText().fill(helpText);
if (required) {
await this.get()
.locator(`.nc-form-drag-${field.replace(" ", "")}`)
.click();
}
await this.formHeading.click();
}
async verifyField({
field,
required,
label,
helpText,
}: {
field: string;
required: boolean;
label: string;
helpText: string;
}) {
let expectText = "";
if (required) expectText = label + " *";
else expectText = label;
// data-pw="nc-form-input-label"
// data-pw="nc-form-input-help-text-label"
let fieldLabel = await this.get()
.locator(`.nc-form-drag-${field.replace(" ", "")}`)
.locator('div[data-pw="nc-form-input-label"]');
await expect(fieldLabel).toHaveText(expectText);
let fieldHelpText = await this.get()
.locator(`.nc-form-drag-${field.replace(" ", "")}`)
.locator('div[data-pw="nc-form-input-help-text-label"]');
await expect(fieldHelpText).toHaveText(helpText);
}
async submitForm() {
await this.submitButton.click();
}
async verifyStatePostSubmit(param: {
message?: string;
submitAnotherForm?: boolean;
showBlankForm?: boolean;
}) {
if (undefined !== param.message) {
await expect(await this.getFormAfterSubmit()).toContainText(param.message);
}
if (true === param.submitAnotherForm) {
await expect(
await this.getFormAfterSubmit().locator(
'button:has-text("Submit Another Form")'
)
).toBeVisible();
}
if (true === param.showBlankForm) {
await this.get().waitFor();
}
}
async configureSubmitMessage(param: { message: string }) {
await this.afterSubmitMsg.fill(param.message);
}
submitAnotherForm() {
return this.getFormAfterSubmit().locator(
'button:has-text("Submit Another Form")'
);
}
// todo: Wait for render to complete
async waitLoading() {
await this.rootPage.waitForTimeout(1000);
}
async verifyAfterSubmitMenuState(param: {
showBlankForm?: boolean;
submitAnotherForm?: boolean;
emailMe?: boolean;
}) {
if (true === param.showBlankForm) {
await expect(
this.get().locator(
'[data-pw="nc-form-checkbox-show-blank-form"][aria-checked="true"]'
)
).toBeVisible();
}
if (true === param.submitAnotherForm) {
await expect(
this.get().locator(
'[data-pw="nc-form-checkbox-submit-another-form"][aria-checked="true"]'
)
).toBeVisible();
}
if (true === param.emailMe) {
await expect(
this.get().locator(
'[data-pw="nc-form-checkbox-send-email"][aria-checked="true"]'
)
).toBeVisible();
}
}
}