From 3cd1c1fced91ae1044f79a2b8467d03b671db6f6 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 24 Sep 2025 15:33:38 +0800 Subject: [PATCH 1/5] test: style test2 --- cypress/e2e/editor/document-editing.cy.ts | 36 +++++++++---------- cypress/e2e/editor/slash-menu.cy.ts | 4 +-- cypress/support/selectors.ts | 24 +++++++++++++ .../selection-toolbar/SelectionToolbar.tsx | 1 + .../selection-toolbar/actions/Bold.tsx | 1 + .../selection-toolbar/actions/InlineCode.tsx | 1 + .../selection-toolbar/actions/Italic.tsx | 1 + .../actions/StrikeThrough.tsx | 1 + .../selection-toolbar/actions/Underline.tsx | 1 + 9 files changed, 49 insertions(+), 21 deletions(-) diff --git a/cypress/e2e/editor/document-editing.cy.ts b/cypress/e2e/editor/document-editing.cy.ts index 5e667e37..7d683472 100644 --- a/cypress/e2e/editor/document-editing.cy.ts +++ b/cypress/e2e/editor/document-editing.cy.ts @@ -1,5 +1,6 @@ import { v4 as uuidv4 } from 'uuid'; import { AuthTestUtils } from '../../support/auth-utils'; +import { EditorSelectors } from '../../support/selectors'; describe('Document Editing with Formatting', () => { const generateRandomEmail = () => `${uuidv4()}@appflowy.io`; @@ -26,9 +27,8 @@ describe('Document Editing with Formatting', () => { cy.wait(5000); // Find and focus the editor - cy.get('[data-slate-editor="true"]', { timeout: 10000 }) + EditorSelectors.firstEditor() .should('exist') - .first() .click({ force: true }); cy.wait(1000); @@ -65,9 +65,9 @@ describe('Document Editing with Formatting', () => { cy.wait(1000); // Verify content - cy.get('[data-slate-editor="true"]').should('contain.text', 'Document Title'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Main Heading'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Some content text'); + EditorSelectors.slateEditor().should('contain.text', 'Document Title'); + EditorSelectors.slateEditor().should('contain.text', 'Main Heading'); + EditorSelectors.slateEditor().should('contain.text', 'Some content text'); }); }); @@ -88,9 +88,8 @@ describe('Document Editing with Formatting', () => { cy.wait(5000); // Find and focus the editor - cy.get('[data-slate-editor="true"]', { timeout: 10000 }) + EditorSelectors.firstEditor() .should('exist') - .first() .click({ force: true }); cy.wait(1000); @@ -136,10 +135,10 @@ describe('Document Editing with Formatting', () => { cy.wait(1000); // Verify content - cy.get('[data-slate-editor="true"]').should('contain.text', 'Shopping List'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Apples'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Bananas'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Oranges'); + EditorSelectors.slateEditor().should('contain.text', 'Shopping List'); + EditorSelectors.slateEditor().should('contain.text', 'Apples'); + EditorSelectors.slateEditor().should('contain.text', 'Bananas'); + EditorSelectors.slateEditor().should('contain.text', 'Oranges'); }); }); @@ -160,9 +159,8 @@ describe('Document Editing with Formatting', () => { cy.wait(5000); // Find and focus the editor - cy.get('[data-slate-editor="true"]', { timeout: 10000 }) + EditorSelectors.firstEditor() .should('exist') - .first() .click({ force: true }); cy.wait(1000); @@ -235,12 +233,12 @@ describe('Document Editing with Formatting', () => { cy.wait(1000); // Verify content - cy.get('[data-slate-editor="true"]').should('contain.text', 'Steps to Follow'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'First step'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Second step'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Tasks'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Complete report'); - cy.get('[data-slate-editor="true"]').should('contain.text', 'Review code'); + EditorSelectors.slateEditor().should('contain.text', 'Steps to Follow'); + EditorSelectors.slateEditor().should('contain.text', 'First step'); + EditorSelectors.slateEditor().should('contain.text', 'Second step'); + EditorSelectors.slateEditor().should('contain.text', 'Tasks'); + EditorSelectors.slateEditor().should('contain.text', 'Complete report'); + EditorSelectors.slateEditor().should('contain.text', 'Review code'); }); }); }); \ No newline at end of file diff --git a/cypress/e2e/editor/slash-menu.cy.ts b/cypress/e2e/editor/slash-menu.cy.ts index 84e9f94f..a7d73b69 100644 --- a/cypress/e2e/editor/slash-menu.cy.ts +++ b/cypress/e2e/editor/slash-menu.cy.ts @@ -1,6 +1,6 @@ import { v4 as uuidv4 } from 'uuid'; import { AuthTestUtils } from '../../support/auth-utils'; -import { PageSelectors, waitForReactUpdate } from '../../support/selectors'; +import { EditorSelectors, PageSelectors, waitForReactUpdate } from '../../support/selectors'; describe('Editor Slash Menu', () => { const generateRandomEmail = () => `${uuidv4()}@appflowy.io`; @@ -37,7 +37,7 @@ describe('Editor Slash Menu', () => { cy.wait(5000); // Give page time to fully load // Focus on editor - cy.get('[data-slate-editor="true"]').should('exist').click(); + EditorSelectors.slateEditor().should('exist').click(); waitForReactUpdate(1000); // Type slash to open menu diff --git a/cypress/support/selectors.ts b/cypress/support/selectors.ts index 131d5903..8a7afc0b 100644 --- a/cypress/support/selectors.ts +++ b/cypress/support/selectors.ts @@ -303,6 +303,30 @@ export const CheckboxSelectors = { uncheckedCells: () => cy.get('[data-checked="false"]'), }; +/** + * Editor-related selectors + */ +export const EditorSelectors = { + // Main Slate editor + slateEditor: () => cy.get('[data-slate-editor="true"]'), + + // Get first editor + firstEditor: () => cy.get('[data-slate-editor="true"]').first(), + + // Get editor with specific content + editorWithText: (text: string) => cy.get('[data-slate-editor="true"]').contains(text), + + // Selection toolbar + selectionToolbar: () => cy.get('[data-testid="selection-toolbar"]'), + + // Formatting buttons in toolbar + boldButton: () => cy.get('[data-testid="toolbar-bold-button"]'), + italicButton: () => cy.get('[data-testid="toolbar-italic-button"]'), + underlineButton: () => cy.get('[data-testid="toolbar-underline-button"]'), + strikethroughButton: () => cy.get('[data-testid="toolbar-strikethrough-button"]'), + codeButton: () => cy.get('[data-testid="toolbar-code-button"]'), +}; + /** * Helper function to wait for React to re-render after state changes */ diff --git a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx index a35e8711..8704bb37 100644 --- a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx +++ b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx @@ -43,6 +43,7 @@ export function SelectionToolbar() {
{t('toolbar.bold')}
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx index 0afe9537..f3ff2898 100644 --- a/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx +++ b/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx @@ -24,6 +24,7 @@ export function InlineCode() {
{t('editor.embedCode')}
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx index 0df1909a..38cc8eb8 100644 --- a/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx +++ b/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx @@ -24,6 +24,7 @@ export function Italic() {
{t('toolbar.italic')}
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx index ee248ff6..58ff8c17 100644 --- a/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx +++ b/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx @@ -24,6 +24,7 @@ export function StrikeThrough() {
{t('editor.strikethrough')}
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx index e6a45202..f9042239 100644 --- a/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx +++ b/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx @@ -24,6 +24,7 @@ export function Underline() {
{t('editor.underline')}
From 1ec3f957cf40597333dbf6bd44d33aedb42428f2 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 24 Sep 2025 15:33:43 +0800 Subject: [PATCH 2/5] test: style test2 --- cypress/e2e/editor/text-formatting.cy.ts | 93 ++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 cypress/e2e/editor/text-formatting.cy.ts diff --git a/cypress/e2e/editor/text-formatting.cy.ts b/cypress/e2e/editor/text-formatting.cy.ts new file mode 100644 index 00000000..09a2e929 --- /dev/null +++ b/cypress/e2e/editor/text-formatting.cy.ts @@ -0,0 +1,93 @@ +import { v4 as uuidv4 } from 'uuid'; +import { AuthTestUtils } from '../../support/auth-utils'; +import { EditorSelectors, waitForReactUpdate } from '../../support/selectors'; + +describe('Text Formatting - Selection and Formatting', () => { + const generateRandomEmail = () => `${uuidv4()}@appflowy.io`; + + beforeEach(() => { + cy.on('uncaught:exception', () => false); + cy.viewport(1280, 720); + }); + + it('should apply all formatting styles to text', () => { + const testEmail = generateRandomEmail(); + + // Login + cy.visit('/login', { failOnStatusCode: false }); + cy.wait(2000); + + const authUtils = new AuthTestUtils(); + authUtils.signInWithTestUrl(testEmail).then(() => { + cy.url({ timeout: 30000 }).should('include', '/app'); + cy.wait(3000); + + // Navigate to Getting started page + cy.contains('Getting started').click(); + cy.wait(5000); // Give page time to fully load + + // Focus on editor + EditorSelectors.slateEditor().should('exist').click(); + waitForReactUpdate(1000); + + // Clear existing content + cy.focused().type('{selectall}{backspace}'); + waitForReactUpdate(500); + + // Test 1: Bold text + cy.log('Testing BOLD formatting'); + cy.focused().type('This line is bold'); + waitForReactUpdate(500); + cy.focused().type('{selectall}'); + cy.focused().type('{cmd+b}'); + waitForReactUpdate(500); + cy.get('strong').should('exist'); + cy.focused().type('{end}{enter}'); + waitForReactUpdate(500); + + // Test 2: Italic text + cy.log('Testing ITALIC formatting'); + cy.focused().type('This line is italic'); + waitForReactUpdate(500); + cy.focused().type('{selectall}'); + cy.focused().type('{cmd+i}'); + waitForReactUpdate(500); + cy.get('em').should('exist'); + cy.focused().type('{end}{enter}'); + waitForReactUpdate(500); + + // Test 3: Underline text + cy.log('Testing UNDERLINE formatting'); + cy.focused().type('This line is underlined'); + waitForReactUpdate(500); + cy.focused().type('{selectall}'); + cy.focused().type('{cmd+u}'); + waitForReactUpdate(500); + cy.get('u').should('exist'); + cy.focused().type('{end}{enter}'); + waitForReactUpdate(500); + + // Test 4: Strikethrough text + cy.log('Testing STRIKETHROUGH formatting'); + cy.focused().type('This line has strikethrough'); + waitForReactUpdate(500); + cy.focused().type('{selectall}'); + cy.focused().type('{shift+cmd+s}'); + waitForReactUpdate(500); + cy.get('s, del, strike, [style*="text-decoration: line-through"]').should('exist'); + + // Final verification - all formatted elements should be visible + cy.log('Verifying all formatted text is visible'); + waitForReactUpdate(1000); + cy.get('strong').should('exist').and('contain.text', 'bold'); + cy.get('em').should('exist').and('contain.text', 'italic'); + cy.get('u').should('exist').and('contain.text', 'underlined'); + cy.get('s, del, strike, [style*="text-decoration: line-through"]').should('exist'); + + // Take screenshot to verify all lines are visible + cy.screenshot('all-formatted-lines-visible'); + + cy.log('All text formatting styles tested successfully - each line shows a different style'); + }); + }); +}); \ No newline at end of file From 700c9bad8b5d7003c0463fa01594228cbe29dac0 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 24 Sep 2025 20:22:37 +0800 Subject: [PATCH 3/5] test: fix tst --- cypress/e2e/editor/text-formatting.cy.ts | 58 ++++++++++++++---------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/cypress/e2e/editor/text-formatting.cy.ts b/cypress/e2e/editor/text-formatting.cy.ts index 09a2e929..bacf8707 100644 --- a/cypress/e2e/editor/text-formatting.cy.ts +++ b/cypress/e2e/editor/text-formatting.cy.ts @@ -26,63 +26,73 @@ describe('Text Formatting - Selection and Formatting', () => { cy.contains('Getting started').click(); cy.wait(5000); // Give page time to fully load - // Focus on editor - EditorSelectors.slateEditor().should('exist').click(); - waitForReactUpdate(1000); + // Focus on editor and ensure it's ready + EditorSelectors.slateEditor().should('exist').and('be.visible'); + cy.wait(2000); // Extra wait for CI environment + EditorSelectors.slateEditor().click(); + waitForReactUpdate(2000); // Clear existing content cy.focused().type('{selectall}{backspace}'); - waitForReactUpdate(500); + waitForReactUpdate(1000); // Give more time for content to clear // Test 1: Bold text cy.log('Testing BOLD formatting'); cy.focused().type('This line is bold'); - waitForReactUpdate(500); + waitForReactUpdate(1000); cy.focused().type('{selectall}'); + waitForReactUpdate(500); cy.focused().type('{cmd+b}'); - waitForReactUpdate(500); - cy.get('strong').should('exist'); + waitForReactUpdate(1000); + // Wait for the strong element to appear with retry and longer timeout + cy.get('strong', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); - waitForReactUpdate(500); + waitForReactUpdate(1000); // Test 2: Italic text cy.log('Testing ITALIC formatting'); cy.focused().type('This line is italic'); - waitForReactUpdate(500); + waitForReactUpdate(1000); cy.focused().type('{selectall}'); + waitForReactUpdate(500); cy.focused().type('{cmd+i}'); - waitForReactUpdate(500); - cy.get('em').should('exist'); + waitForReactUpdate(1000); + // Wait for the em element to appear with retry and longer timeout + cy.get('em', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); - waitForReactUpdate(500); + waitForReactUpdate(1000); // Test 3: Underline text cy.log('Testing UNDERLINE formatting'); cy.focused().type('This line is underlined'); - waitForReactUpdate(500); + waitForReactUpdate(1000); cy.focused().type('{selectall}'); + waitForReactUpdate(500); cy.focused().type('{cmd+u}'); - waitForReactUpdate(500); - cy.get('u').should('exist'); + waitForReactUpdate(1000); + // Wait for the u element to appear with retry and longer timeout + cy.get('u', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); - waitForReactUpdate(500); + waitForReactUpdate(1000); // Test 4: Strikethrough text cy.log('Testing STRIKETHROUGH formatting'); cy.focused().type('This line has strikethrough'); - waitForReactUpdate(500); + waitForReactUpdate(1000); cy.focused().type('{selectall}'); - cy.focused().type('{shift+cmd+s}'); waitForReactUpdate(500); - cy.get('s, del, strike, [style*="text-decoration: line-through"]').should('exist'); + cy.focused().type('{shift+cmd+s}'); + waitForReactUpdate(1000); + // Wait for the strikethrough element to appear with retry and longer timeout + cy.get('s, del, strike, [style*="text-decoration: line-through"]', { timeout: 15000 }).should('exist').and('be.visible'); // Final verification - all formatted elements should be visible cy.log('Verifying all formatted text is visible'); - waitForReactUpdate(1000); - cy.get('strong').should('exist').and('contain.text', 'bold'); - cy.get('em').should('exist').and('contain.text', 'italic'); - cy.get('u').should('exist').and('contain.text', 'underlined'); - cy.get('s, del, strike, [style*="text-decoration: line-through"]').should('exist'); + waitForReactUpdate(2000); + cy.get('strong', { timeout: 15000 }).should('exist').and('be.visible').and('contain.text', 'bold'); + cy.get('em', { timeout: 15000 }).should('exist').and('be.visible').and('contain.text', 'italic'); + cy.get('u', { timeout: 15000 }).should('exist').and('be.visible').and('contain.text', 'underlined'); + cy.get('s, del, strike, [style*="text-decoration: line-through"]', { timeout: 15000 }).should('exist').and('be.visible'); // Take screenshot to verify all lines are visible cy.screenshot('all-formatted-lines-visible'); From 5e343426557c4f27db68461143ad784f63a134cd Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 24 Sep 2025 21:28:46 +0800 Subject: [PATCH 4/5] test: fix tst --- cypress/e2e/editor/text-formatting.cy.ts | 76 ++++++++++++++++++++---- 1 file changed, 64 insertions(+), 12 deletions(-) diff --git a/cypress/e2e/editor/text-formatting.cy.ts b/cypress/e2e/editor/text-formatting.cy.ts index bacf8707..79086c31 100644 --- a/cypress/e2e/editor/text-formatting.cy.ts +++ b/cypress/e2e/editor/text-formatting.cy.ts @@ -36,53 +36,105 @@ describe('Text Formatting - Selection and Formatting', () => { cy.focused().type('{selectall}{backspace}'); waitForReactUpdate(1000); // Give more time for content to clear - // Test 1: Bold text + // Test 1: Bold text using toolbar button cy.log('Testing BOLD formatting'); cy.focused().type('This line is bold'); waitForReactUpdate(1000); + + // Select all text cy.focused().type('{selectall}'); - waitForReactUpdate(500); - cy.focused().type('{cmd+b}'); waitForReactUpdate(1000); + + // Wait for selection toolbar to appear and click bold button + cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) + .should('exist') + .should('have.css', 'opacity', '1'); + + cy.get('[data-testid="toolbar-bold-button"]', { timeout: 10000 }) + .should('exist') + .should('be.visible') + .click({ force: true }); + + waitForReactUpdate(1000); + // Wait for the strong element to appear with retry and longer timeout cy.get('strong', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); waitForReactUpdate(1000); - // Test 2: Italic text + // Test 2: Italic text using toolbar button cy.log('Testing ITALIC formatting'); cy.focused().type('This line is italic'); waitForReactUpdate(1000); + + // Select all text cy.focused().type('{selectall}'); - waitForReactUpdate(500); - cy.focused().type('{cmd+i}'); waitForReactUpdate(1000); + + // Wait for selection toolbar and click italic button + cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) + .should('exist') + .should('have.css', 'opacity', '1'); + + cy.get('[data-testid="toolbar-italic-button"]', { timeout: 10000 }) + .should('exist') + .should('be.visible') + .click({ force: true }); + + waitForReactUpdate(1000); + // Wait for the em element to appear with retry and longer timeout cy.get('em', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); waitForReactUpdate(1000); - // Test 3: Underline text + // Test 3: Underline text using toolbar button cy.log('Testing UNDERLINE formatting'); cy.focused().type('This line is underlined'); waitForReactUpdate(1000); + + // Select all text cy.focused().type('{selectall}'); - waitForReactUpdate(500); - cy.focused().type('{cmd+u}'); waitForReactUpdate(1000); + + // Wait for selection toolbar and click underline button + cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) + .should('exist') + .should('have.css', 'opacity', '1'); + + cy.get('[data-testid="toolbar-underline-button"]', { timeout: 10000 }) + .should('exist') + .should('be.visible') + .click({ force: true }); + + waitForReactUpdate(1000); + // Wait for the u element to appear with retry and longer timeout cy.get('u', { timeout: 15000 }).should('exist').and('be.visible'); cy.focused().type('{end}{enter}'); waitForReactUpdate(1000); - // Test 4: Strikethrough text + // Test 4: Strikethrough text using toolbar button cy.log('Testing STRIKETHROUGH formatting'); cy.focused().type('This line has strikethrough'); waitForReactUpdate(1000); + + // Select all text cy.focused().type('{selectall}'); - waitForReactUpdate(500); - cy.focused().type('{shift+cmd+s}'); waitForReactUpdate(1000); + + // Wait for selection toolbar and click strikethrough button + cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) + .should('exist') + .should('have.css', 'opacity', '1'); + + cy.get('[data-testid="toolbar-strikethrough-button"]', { timeout: 10000 }) + .should('exist') + .should('be.visible') + .click({ force: true }); + + waitForReactUpdate(1000); + // Wait for the strikethrough element to appear with retry and longer timeout cy.get('s, del, strike, [style*="text-decoration: line-through"]', { timeout: 15000 }).should('exist').and('be.visible'); From 9ee803e170a67fec7080f2256f532583b381a372 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 24 Sep 2025 22:59:44 +0800 Subject: [PATCH 5/5] test: fix test --- cypress/e2e/editor/text-formatting.cy.ts | 32 ++++++++++++------------ cypress/support/selectors.ts | 10 ++++---- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/cypress/e2e/editor/text-formatting.cy.ts b/cypress/e2e/editor/text-formatting.cy.ts index 79086c31..3db2ee1d 100644 --- a/cypress/e2e/editor/text-formatting.cy.ts +++ b/cypress/e2e/editor/text-formatting.cy.ts @@ -46,12 +46,12 @@ describe('Text Formatting - Selection and Formatting', () => { waitForReactUpdate(1000); // Wait for selection toolbar to appear and click bold button - cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.selectionToolbar() + .should('exist', { timeout: 10000 }) .should('have.css', 'opacity', '1'); - cy.get('[data-testid="toolbar-bold-button"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.boldButton() + .should('exist', { timeout: 10000 }) .should('be.visible') .click({ force: true }); @@ -72,12 +72,12 @@ describe('Text Formatting - Selection and Formatting', () => { waitForReactUpdate(1000); // Wait for selection toolbar and click italic button - cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.selectionToolbar() + .should('exist', { timeout: 10000 }) .should('have.css', 'opacity', '1'); - cy.get('[data-testid="toolbar-italic-button"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.italicButton() + .should('exist', { timeout: 10000 }) .should('be.visible') .click({ force: true }); @@ -98,12 +98,12 @@ describe('Text Formatting - Selection and Formatting', () => { waitForReactUpdate(1000); // Wait for selection toolbar and click underline button - cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.selectionToolbar() + .should('exist', { timeout: 10000 }) .should('have.css', 'opacity', '1'); - cy.get('[data-testid="toolbar-underline-button"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.underlineButton() + .should('exist', { timeout: 10000 }) .should('be.visible') .click({ force: true }); @@ -124,12 +124,12 @@ describe('Text Formatting - Selection and Formatting', () => { waitForReactUpdate(1000); // Wait for selection toolbar and click strikethrough button - cy.get('[data-testid="selection-toolbar"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.selectionToolbar() + .should('exist', { timeout: 10000 }) .should('have.css', 'opacity', '1'); - cy.get('[data-testid="toolbar-strikethrough-button"]', { timeout: 10000 }) - .should('exist') + EditorSelectors.strikethroughButton() + .should('exist', { timeout: 10000 }) .should('be.visible') .click({ force: true }); diff --git a/cypress/support/selectors.ts b/cypress/support/selectors.ts index 8a7afc0b..60f8ff40 100644 --- a/cypress/support/selectors.ts +++ b/cypress/support/selectors.ts @@ -320,11 +320,11 @@ export const EditorSelectors = { selectionToolbar: () => cy.get('[data-testid="selection-toolbar"]'), // Formatting buttons in toolbar - boldButton: () => cy.get('[data-testid="toolbar-bold-button"]'), - italicButton: () => cy.get('[data-testid="toolbar-italic-button"]'), - underlineButton: () => cy.get('[data-testid="toolbar-underline-button"]'), - strikethroughButton: () => cy.get('[data-testid="toolbar-strikethrough-button"]'), - codeButton: () => cy.get('[data-testid="toolbar-code-button"]'), + boldButton: () => cy.get(byTestId('toolbar-bold-button')), + italicButton: () => cy.get(byTestId('toolbar-italic-button')), + underlineButton: () => cy.get(byTestId('toolbar-underline-button')), + strikethroughButton: () => cy.get(byTestId('toolbar-strikethrough-button')), + codeButton: () => cy.get(byTestId('toolbar-code-button')), }; /**