mirror of
https://github.com/penpot/penpotqa.git
synced 2024-08-04 09:28:54 +00:00
![Staschalapko](/assets/img/avatar_default.png)
# Conflicts: # pages/base-page.js # pages/dashboard/dashboard-page.js # pages/workspace/color-palette-page.js # pages/workspace/design-panel-page.js # pages/workspace/inspect-panel-page.js # pages/workspace/main-page.js # tests/assets/assets-colors.spec.js-snapshots/darwin/chrome/colors-add-color.png # tests/assets/assets-colors.spec.js-snapshots/darwin/chrome/colors-edit-color.png # tests/assets/assets-colors.spec.js-snapshots/darwin/chrome/colors-rename-color.png # tests/assets/assets-shortcuts-panel.spec.js-snapshots/darwin/chrome/shortcuts-panel.png # tests/assets/assets-shortcuts-panel.spec.js-snapshots/darwin/firefox/shortcuts-panel.png # tests/assets/assets-shortcuts-panel.spec.js-snapshots/darwin/webkit/shortcuts-panel.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-annotation-edit.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-annotation-inspect-tab.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-grid-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-list-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/component-rectangle-duplicated-asset.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/chrome/copy-component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-annotation-edit.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-annotation-inspect-tab.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-grid-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-list-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/component-rectangle-duplicated-asset.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/firefox/copy-component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-annotation-edit.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-annotation-inspect-tab.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-grid-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-list-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/component-rectangle-duplicated-asset.png # tests/components/main-components/context-menu-options.spec.js-snapshots/darwin/webkit/copy-component-annotation.png # tests/components/main-components/context-menu-options.spec.js-snapshots/win32/chrome/component-grid-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/win32/chrome/component-list-view.png # tests/components/main-components/context-menu-options.spec.js-snapshots/win32/chrome/component-rectangle-duplicated-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/board-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/board-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/copy-main-components-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/curve-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/curve-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/ellipse-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/ellipse-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/image-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/image-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/multiple-components-asset-3-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/multiple-components-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/multiple-components-layer-3-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/multiple-components-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/rectangle-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/rectangle-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/text-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/chrome/text-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/board-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/board-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/copy-main-components-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/curve-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/curve-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/ellipse-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/ellipse-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/image-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/image-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/multiple-components-asset-3-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/multiple-components-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/multiple-components-layer-3-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/multiple-components-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/rectangle-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/rectangle-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/text-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/text-main-component-canvas.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/firefox/text-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/board-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/board-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/curve-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/curve-main-component-canvas.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/curve-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/ellipse-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/ellipse-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/image-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/image-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/multiple-components-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/multiple-components-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/rectangle-component-asset.png # tests/components/main-components/create-main-components.spec.js-snapshots/darwin/webkit/rectangle-main-component-layer.png # tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/multiple-components-asset-3-layers.png # tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/multiple-components-asset.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/chrome/assets-component-delete.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/chrome/rectangle-component-asset.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/firefox/assets-component-delete.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/firefox/rectangle-component-asset.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/webkit/assets-component-delete.png # tests/components/main-components/delete-main-components.spec.js-snapshots/darwin/webkit/rectangle-component-asset.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/chrome/component-update-asset.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/chrome/copy-main-components-layers.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/firefox/component-update-asset.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/firefox/copy-main-components-layers.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/webkit/component-update-asset.png # tests/components/main-components/update-main-components.spec.js-snapshots/darwin/webkit/copy-main-components-layers.png # tests/panels-features/panels-features-pages.spec.js-snapshots/win32/chrome/hidden-pages.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/chrome/assets-file-right-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/chrome/view-mode-inspect-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/chrome/view-mode-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/firefox/assets-file-right-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/firefox/view-mode-inspect-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/firefox/view-mode-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/webkit/assets-file-right-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/webkit/view-mode-inspect-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/darwin/webkit/view-mode-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/assets-file-left-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/assets-file-right-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/dashboard-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/fonts-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/inspect-file-right-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/layers-file-left-sidebar-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/profile-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/view-mode-inspect-page-image.png # tests/ui-theme/ui-theme-features-light-mode.spec.js-snapshots/win32/chrome/view-mode-page-image.png
269 lines
9.2 KiB
JavaScript
269 lines
9.2 KiB
JavaScript
const { expect } = require('@playwright/test');
|
|
const { getPlatformName } = require('../helpers/get-platform');
|
|
|
|
exports.BasePage = class BasePage {
|
|
/**
|
|
* @param {import('@playwright/test').Page} page
|
|
*/
|
|
constructor(page) {
|
|
this.page = page;
|
|
this.header = page.locator('div[class*="dashboard-title"] h1');
|
|
this.successMessage = page.locator('div[class*="main_ui_notifications_toast_notification__text"]');
|
|
this.infoMessage = page.locator('div[class*="main_ui_messages__banner"]');
|
|
this.wrapperMessage = page.locator('div[class*="main_ui_messages__wrapper"]');
|
|
this.moveButton = page.locator('button[title="Move (V)"]');
|
|
this.savedChangesIcon = page.locator('div[title="Saved"]');
|
|
this.viewport = page.locator('div.viewport');
|
|
|
|
//Layer right-click menu items
|
|
this.createdLayer = page.locator('div[class="viewport"] [id^="shape"] >> nth=0');
|
|
this.copyLayer = page.locator('div[class="viewport"] [id^="shape"]').last();
|
|
this.createdBoardTitle = page.locator('g[class="frame-title"] div >> nth=0');
|
|
this.deleteLayerMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Delete")',
|
|
);
|
|
this.hideLayerMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Hide")',
|
|
);
|
|
this.showLayerMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Show")',
|
|
);
|
|
this.focusOnLayerMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Focus on")',
|
|
);
|
|
this.transformToPathMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Transform to path")',
|
|
);
|
|
this.selectionToBoardMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Selection to board")',
|
|
);
|
|
this.createComponentMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Create component")',
|
|
);
|
|
this.createMultipleComponentsMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Create multiple components")',
|
|
);
|
|
this.flipVerticalMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Flip vertical")',
|
|
);
|
|
this.flipHorizontalMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Flip horizontal")',
|
|
);
|
|
this.editPathMenuItem = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Edit")',
|
|
);
|
|
this.addFlexLayout = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Add flex layout")',
|
|
);
|
|
this.removeFlexLayout = page.locator(
|
|
'ul[class*="workspace-context-menu"] li:has-text("Remove flex layout")',
|
|
);
|
|
this.deleteLayerMenuOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Delete")',
|
|
);
|
|
this.createComponentMenuItem = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Create component")',
|
|
);
|
|
this.updateMainComponentMenuItem = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Update main component")',
|
|
);
|
|
this.restoreMainComponentMenuItem = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Restore main component")',
|
|
);
|
|
this.createMultipleComponentsMenuItem = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Create multiple components")',
|
|
);
|
|
this.showInAssetsPanelOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Show in assets panel")',
|
|
);
|
|
this.createAnnotationOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Create annotation")',
|
|
);
|
|
this.duplicateOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Duplicate")',
|
|
);
|
|
this.showMainComponentOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Show main component")',
|
|
);
|
|
this.resetOverridesOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Reset overrides")',
|
|
);
|
|
this.detachInstanceOption = page.locator(
|
|
'ul[class*="workspace_context_menu"] span:has-text("Detach instance")',
|
|
);
|
|
}
|
|
|
|
async clearInput(input, browserName) {
|
|
await input.click();
|
|
if (getPlatformName() === 'MacOS') {
|
|
await this.page.keyboard.press('Meta+A');
|
|
} else {
|
|
if (browserName === 'webkit') {
|
|
await this.page.keyboard.press('Meta+A');
|
|
} else {
|
|
await this.page.keyboard.press('Control+A');
|
|
}
|
|
}
|
|
await this.page.keyboard.press('Delete');
|
|
}
|
|
|
|
async clickShortcutCtrlZ(browserName) {
|
|
if (getPlatformName() === 'MacOS') {
|
|
await this.page.keyboard.press('Meta+Z');
|
|
} else {
|
|
if (browserName !== 'webkit') {
|
|
await this.page.keyboard.press('Control+Z');
|
|
} else {
|
|
await this.page.keyboard.press('Meta+Z');
|
|
}
|
|
}
|
|
}
|
|
|
|
async reloadPage() {
|
|
await this.page.reload();
|
|
}
|
|
|
|
async clickOnEnter() {
|
|
await this.page.keyboard.press('Enter');
|
|
}
|
|
|
|
async isHeaderDisplayed(title) {
|
|
await expect(this.header).toHaveText(title);
|
|
}
|
|
|
|
async isSuccessMessageDisplayed(message) {
|
|
await expect(this.successMessage).toHaveText(message);
|
|
}
|
|
|
|
async waitSuccessMessageHidden() {
|
|
await this.successMessage.waitFor({ state: 'hidden' });
|
|
}
|
|
|
|
async waitInfoMessageHidden() {
|
|
await this.infoMessage.waitFor({ state: 'hidden' });
|
|
}
|
|
|
|
async clickMoveButton() {
|
|
await this.moveButton.click({ force: true });
|
|
}
|
|
|
|
async waitForChangeIsSaved() {
|
|
await this.savedChangesIcon.waitFor({ state: 'visible' });
|
|
}
|
|
|
|
async refreshPage() {
|
|
await this.page.reload();
|
|
await this.page.waitForTimeout(2000)
|
|
}
|
|
|
|
async deleteLayerViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.deleteLayerMenuItem.click();
|
|
}
|
|
|
|
async hideLayerViaRightClickOnCanvas(title) {
|
|
const boardSel = this.page.locator(
|
|
`//*[@class='frame-title']//../*[text()='${title}']`,
|
|
);
|
|
await boardSel.click({ button: 'right', force: true });
|
|
await this.hideLayerMenuItem.click();
|
|
}
|
|
|
|
async focusBoardViaRightClickOnCanvas(title) {
|
|
const boardSel = this.page.locator(
|
|
`//*[text()="${title}"]//parent::*[@class="frame-title"]`,
|
|
);
|
|
await boardSel.click({ button: 'right', force: true });
|
|
await this.focusOnLayerMenuItem.click();
|
|
}
|
|
|
|
async focusLayerViaRightClickOnCanvas() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.focusOnLayerMenuItem.click();
|
|
}
|
|
|
|
async getLayerSelectorOnLayersTab(layer) {
|
|
return this.page.locator(
|
|
`//*[text()="${layer}"]//parent::div[contains(@class, "element-list-body")]`,
|
|
);
|
|
}
|
|
|
|
async focusLayerViaRightClickOnLayersTab(layer) {
|
|
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
|
|
await layerSel.click({ button: 'right', force: true });
|
|
await this.focusOnLayerMenuItem.click();
|
|
}
|
|
|
|
async hideLayerViaRightClickOnLayersTab(layer) {
|
|
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
|
|
await layerSel.click({ button: 'right', force: true });
|
|
await this.hideLayerMenuItem.click();
|
|
}
|
|
|
|
async unHideLayerViaRightClickOnLayersTab(layer) {
|
|
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
|
|
await layerSel.click({ button: 'right', force: true });
|
|
await this.showLayerMenuItem.click();
|
|
}
|
|
|
|
async transformToPathViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.transformToPathMenuItem.click();
|
|
}
|
|
|
|
async selectionToBoardViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.selectionToBoardMenuItem.click();
|
|
}
|
|
|
|
async createComponentViaRightClick() {
|
|
const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
|
|
await layerSel.last().click({ button: 'right', force: true });
|
|
await this.createComponentMenuItem.click();
|
|
}
|
|
|
|
async flipVerticalViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.flipVerticalMenuItem.click();
|
|
}
|
|
|
|
async flipHorizontalViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.flipHorizontalMenuItem.click();
|
|
}
|
|
|
|
async openNodesPanelViaRightClick() {
|
|
await this.createdLayer.click({ button: 'right', force: true });
|
|
await this.editPathMenuItem.click();
|
|
}
|
|
|
|
async addFlexLayoutViaRightClick() {
|
|
await this.createdBoardTitle.click({ button: 'right', force: true });
|
|
await this.addFlexLayout.click();
|
|
}
|
|
|
|
async addFlexLayoutViaRightClickForNComponent(n) {
|
|
const board = this.page.locator(`g[class="frame-title"] >> nth=${n}`);
|
|
await board.click({ button: 'right', force: true });
|
|
await this.addFlexLayout.click();
|
|
}
|
|
|
|
async removeFlexLayoutViaRightClick() {
|
|
await this.createdBoardTitle.click({ button: 'right', force: true });
|
|
await this.removeFlexLayout.click();
|
|
}
|
|
async showMainComponentViaRightClick() {
|
|
await this.copyLayer.click({ button: 'right', force: true });
|
|
await this.showMainComponentOption.click();
|
|
}
|
|
|
|
async resetOverridesViaRightClick() {
|
|
await this.copyLayer.click({ button: 'right', force: true });
|
|
await this.resetOverridesOption.click();
|
|
}
|
|
|
|
async isWrapperMessageVisible() {
|
|
await expect(this.wrapperMessage).toBeVisible();
|
|
}
|
|
};
|