2023-10-13 16:32:10 +02:00
|
|
|
|
|
|
|
import { Locator, Page } from '@playwright/test';
|
|
|
|
|
|
|
|
export default class NoteEditorPage {
|
|
|
|
public readonly codeMirrorEditor: Locator;
|
2024-09-12 18:54:10 +02:00
|
|
|
public readonly noteViewerContainer: Locator;
|
2023-12-06 21:17:16 +02:00
|
|
|
public readonly richTextEditor: Locator;
|
2023-10-13 16:32:10 +02:00
|
|
|
public readonly noteTitleInput: Locator;
|
2023-12-06 21:17:16 +02:00
|
|
|
public readonly attachFileButton: Locator;
|
|
|
|
public readonly toggleEditorsButton: Locator;
|
2024-08-15 17:01:52 +02:00
|
|
|
public readonly toggleEditorLayoutButton: Locator;
|
|
|
|
public readonly editorSearchInput: Locator;
|
|
|
|
public readonly viewerSearchInput: Locator;
|
2023-10-13 16:32:10 +02:00
|
|
|
private readonly containerLocator: Locator;
|
|
|
|
|
2024-09-12 18:54:10 +02:00
|
|
|
public constructor(page: Page) {
|
2023-10-13 16:32:10 +02:00
|
|
|
this.containerLocator = page.locator('.rli-editor');
|
2024-08-02 15:47:26 +02:00
|
|
|
this.codeMirrorEditor = this.containerLocator.locator('.cm-editor');
|
2023-12-06 21:17:16 +02:00
|
|
|
this.richTextEditor = this.containerLocator.locator('iframe[title="Rich Text Area"]');
|
2023-10-13 16:32:10 +02:00
|
|
|
this.noteTitleInput = this.containerLocator.locator('.title-input');
|
2024-08-03 17:42:46 +02:00
|
|
|
this.attachFileButton = this.containerLocator.getByRole('button', { name: 'Attach file' });
|
|
|
|
this.toggleEditorsButton = this.containerLocator.getByRole('button', { name: 'Toggle editors' });
|
2024-08-15 17:01:52 +02:00
|
|
|
this.toggleEditorLayoutButton = this.containerLocator.getByRole('button', { name: 'Toggle editor layout' });
|
2024-09-12 18:54:10 +02:00
|
|
|
this.noteViewerContainer = this.containerLocator.locator('iframe[src$="note-viewer/index.html"]');
|
2024-08-15 17:01:52 +02:00
|
|
|
// The editor and viewer have slightly different search UI
|
|
|
|
this.editorSearchInput = this.containerLocator.getByPlaceholder('Find');
|
|
|
|
this.viewerSearchInput = this.containerLocator.getByPlaceholder('Search...');
|
2024-08-03 17:42:46 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public toolbarButtonLocator(title: string) {
|
|
|
|
return this.containerLocator.getByRole('button', { name: title });
|
2023-10-13 16:32:10 +02:00
|
|
|
}
|
|
|
|
|
2024-09-12 18:54:10 +02:00
|
|
|
public getNoteViewerFrameLocator() {
|
2023-10-13 16:32:10 +02:00
|
|
|
// The note viewer can change content when the note re-renders. As such,
|
|
|
|
// a new locator needs to be created after re-renders (and this can't be a
|
|
|
|
// static property).
|
2024-09-12 18:54:10 +02:00
|
|
|
return this.noteViewerContainer.frameLocator(':scope');
|
2023-10-13 16:32:10 +02:00
|
|
|
}
|
|
|
|
|
2023-12-06 21:17:16 +02:00
|
|
|
public getTinyMCEFrameLocator() {
|
|
|
|
// We use frameLocator(':scope') to convert the richTextEditor Locator into
|
|
|
|
// a FrameLocator. (:scope selects the locator itself).
|
|
|
|
// https://playwright.dev/docs/api/class-framelocator
|
|
|
|
return this.richTextEditor.frameLocator(':scope');
|
|
|
|
}
|
|
|
|
|
2024-02-02 19:58:27 +02:00
|
|
|
public focusCodeMirrorEditor() {
|
|
|
|
return this.codeMirrorEditor.click();
|
|
|
|
}
|
|
|
|
|
2023-10-13 16:32:10 +02:00
|
|
|
public async waitFor() {
|
|
|
|
await this.noteTitleInput.waitFor();
|
2023-12-06 21:17:16 +02:00
|
|
|
await this.toggleEditorsButton.waitFor();
|
2023-10-13 16:32:10 +02:00
|
|
|
}
|
|
|
|
}
|