38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
|
import { Locator, Page, expect } from '@playwright/test'
|
||
|
|
|
||
|
|
export class Toolbar {
|
||
|
|
readonly toolLock: Locator
|
||
|
|
readonly moreToolsButton: Locator
|
||
|
|
readonly moreToolsPopover: Locator
|
||
|
|
readonly mobileStylesButton: Locator
|
||
|
|
readonly tools: { [key: string]: Locator }
|
||
|
|
readonly popOverTools: { [key: string]: Locator }
|
||
|
|
|
||
|
|
constructor(public readonly page: Page) {
|
||
|
|
this.page = page
|
||
|
|
this.toolLock = this.page.locator('[data-testid="tool-lock"]')
|
||
|
|
this.moreToolsButton = this.page.locator('[data-testid="tools.more-button"]')
|
||
|
|
this.moreToolsPopover = this.page.locator('[data-testid="tools.more-content"]')
|
||
|
|
this.mobileStylesButton = this.page.locator('[data-testid="mobile-styles.button"]')
|
||
|
|
this.tools = {
|
||
|
|
select: this.page.locator('[data-testid="tools.select"]'),
|
||
|
|
draw: this.page.locator('[data-testid="tools.draw"]'),
|
||
|
|
arrow: this.page.locator('[data-testid="tools.arrow"]'),
|
||
|
|
cloud: this.page.locator('[data-testid="tools.cloud"]'),
|
||
|
|
eraser: this.page.locator('[data-testid="tools.eraser"]'),
|
||
|
|
}
|
||
|
|
this.popOverTools = {
|
||
|
|
popoverCloud: this.page.locator('[data-testid="tools.more.cloud"]'),
|
||
|
|
popoverFrame: this.page.locator('[data-testid="tools.more.frame"]'),
|
||
|
|
}
|
||
|
|
}
|
||
|
|
async clickTool(tool: Locator) {
|
||
|
|
await tool.click()
|
||
|
|
}
|
||
|
|
async isSelected(tool: Locator, isSelected: boolean) {
|
||
|
|
// pseudo elements aren't exposed to the DOM, but we can check the color as a proxy
|
||
|
|
const expectedColor = isSelected ? 'rgb(255, 255, 255)' : 'rgb(46, 46, 46)'
|
||
|
|
await expect(tool).toHaveCSS('color', expectedColor)
|
||
|
|
}
|
||
|
|
}
|