chore: add selector

cypress/e2e/database/checkbox-column.cy.ts

@@ -3,6 +3,7 @@ import { AuthTestUtils } from '../../support/auth-utils';
 import {
   AddPageSelectors,
   DatabaseGridSelectors,
+  CheckboxSelectors,
   waitForReactUpdate
 } from '../../support/selectors';
 
@@ -47,7 +48,7 @@ describe('Checkbox Column Type', () => {
 
       // Verify cells exist
       cy.log('[STEP 7] Verifying cells exist');
-      cy.get('[data-testid^="grid-cell-"]', { timeout: 10000 }).should('exist');
+      DatabaseGridSelectors.cells().should('exist');
 
       // Click on first cell
       cy.log('[STEP 8] Clicking on first cell');
@@ -63,7 +64,7 @@ describe('Checkbox Column Type', () => {
           cy.log(`[STEP 10] Found ${checkboxCells.length} checkbox cells`);
 
           // Click first checkbox cell
-          cy.get('[data-testid^="checkbox-cell-"]').first().click();
+          CheckboxSelectors.allCheckboxCells().first().click();
           waitForReactUpdate(500);
           cy.log('[STEP 11] Clicked checkbox cell');
         } else {

cypress/e2e/database/datetime-column.cy.ts

@@ -3,12 +3,15 @@ import { AuthTestUtils } from '../../support/auth-utils';
 import {
   AddPageSelectors,
   DatabaseGridSelectors,
+  DateTimeSelectors,
+  PropertyMenuSelectors,
+  GridFieldSelectors,
+  FieldType,
   waitForReactUpdate
 } from '../../support/selectors';
 
 describe('DateTime Column Type', () => {
   const generateRandomEmail = () => `${uuidv4()}@appflowy.io`;
-  const DATETIME_FIELD_TYPE = 2; // From FieldType enum
 
   beforeEach(() => {
     cy.on('uncaught:exception', (err) => {
@@ -56,8 +59,8 @@ describe('DateTime Column Type', () => {
 
       // Add new column
       cy.log('[STEP 7] Adding new column by clicking new property button');
-      cy.get('[data-testid="grid-new-property-button"]').should('be.visible');
+      PropertyMenuSelectors.newPropertyButton().should('be.visible');
-      cy.get('[data-testid="grid-new-property-button"]').first().scrollIntoView().click({ force: true });
+      PropertyMenuSelectors.newPropertyButton().first().scrollIntoView().click({ force: true });
       waitForReactUpdate(3000);
       
       // The new column is created and the property menu should be open automatically
@@ -67,26 +70,26 @@ describe('DateTime Column Type', () => {
         // Check if property type trigger exists
         if ($body.find('[data-testid="property-type-trigger"]').length > 0) {
           cy.log('[STEP 9] Property type trigger found, changing to DateTime');
-          cy.get('[data-testid="property-type-trigger"]').first().click({ force: true });
+          PropertyMenuSelectors.propertyTypeTrigger().first().click({ force: true });
           waitForReactUpdate(1000);
           
           // Select DateTime option
           cy.log('[STEP 10] Selecting DateTime option');
-          cy.get(`[data-testid="property-type-option-${DATETIME_FIELD_TYPE}"]`).click({ force: true });
+          PropertyMenuSelectors.propertyTypeOption(FieldType.DateTime).click({ force: true });
           waitForReactUpdate(2000);
         } else {
           cy.log('[STEP 9] Property type trigger not found, looking for field header');
           // Try clicking on the new field header first
-          cy.get('[data-testid^="grid-field-header-"]').last().scrollIntoView().click({ force: true });
+          GridFieldSelectors.allFieldHeaders().last().scrollIntoView().click({ force: true });
           waitForReactUpdate(1000);
           
           // Now try to find the property type trigger
-          cy.get('[data-testid="property-type-trigger"]').first().click({ force: true });
+          PropertyMenuSelectors.propertyTypeTrigger().first().click({ force: true });
           waitForReactUpdate(1000);
           
           // Select DateTime option
           cy.log('[STEP 10] Selecting DateTime option');
-          cy.get(`[data-testid="property-type-option-${DATETIME_FIELD_TYPE}"]`).click({ force: true });
+          PropertyMenuSelectors.propertyTypeOption(FieldType.DateTime).click({ force: true });
           waitForReactUpdate(2000);
         }
       });
@@ -104,7 +107,7 @@ describe('DateTime Column Type', () => {
           cy.log(`[STEP 13] Found ${datetimeCells.length} datetime cells`);
           
           // Try to interact with the first datetime cell
-          cy.get('[data-testid^="datetime-cell-"]').first().scrollIntoView().click({ force: true });
+          DateTimeSelectors.allDateTimeCells().first().scrollIntoView().click({ force: true });
           waitForReactUpdate(1000);
           
           // Check if picker opens
@@ -117,8 +120,8 @@ describe('DateTime Column Type', () => {
               const dateStr = `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}/${today.getFullYear()}`;
               
               cy.log(`[STEP 15] Entering date: ${dateStr}`);
-              cy.get('[data-testid="datetime-date-input"]').clear().type(dateStr);
+              DateTimeSelectors.dateTimeDateInput().clear().type(dateStr);
-              cy.get('[data-testid="datetime-date-input"]').type('{enter}');
+              DateTimeSelectors.dateTimeDateInput().type('{enter}');
               waitForReactUpdate(1000);
               
               cy.log('[STEP 16] Date entered successfully');

cypress/e2e/database/single-select-column.cy.ts

@@ -47,7 +47,7 @@ describe('Single Select Column Type', () => {
 
 
       // Verify cells exist
-      cy.get('[data-testid^="grid-cell-"]', { timeout: 10000 }).should('exist');
+      DatabaseGridSelectors.cells().should('exist');
 
       // Get all cells and verify interaction
       DatabaseGridSelectors.cells().then($cells => {

cypress/support/selectors.ts

@@ -243,14 +243,8 @@ export const GridFieldSelectors = {
   // Field header by field ID
   fieldHeader: (fieldId: string) => cy.get(byTestId(`grid-field-header-${fieldId}`)),
   
-  // Edit property menu item
+  // All field headers
-  editPropertyMenuItem: () => cy.get(byTestId('grid-field-edit-property')),
+  allFieldHeaders: () => cy.get('[data-testid^="grid-field-header-"]'),
-  
-  // Property type trigger in property menu
-  propertyTypeTrigger: () => cy.get(byTestId('property-type-trigger')),
-  
-  // Property type option (e.g. SingleSelect = 3)
-  propertyTypeOption: (fieldType: number) => cy.get(byTestId(`property-type-option-${fieldType}`)),
   
   // Add select option button
   addSelectOptionButton: () => cy.get(byTestId('add-select-option')),
@@ -294,6 +288,63 @@ export const CheckboxSelectors = {
 /**
  * Helper function to wait for React to re-render after state changes
  */
+/**
+ * DateTime Column selectors
+ */
+export const DateTimeSelectors = {
+  // DateTime cell by row and field ID
+  dateTimeCell: (rowId: string, fieldId: string) => cy.get(byTestId(`datetime-cell-${rowId}-${fieldId}`)),
+  
+  // All datetime cells
+  allDateTimeCells: () => cy.get('[data-testid^="datetime-cell-"]'),
+  
+  // DateTime picker popover
+  dateTimePickerPopover: () => cy.get(byTestId('datetime-picker-popover')),
+  
+  // DateTime date input field
+  dateTimeDateInput: () => cy.get(byTestId('datetime-date-input')),
+  
+  // DateTime time input field
+  dateTimeTimeInput: () => cy.get(byTestId('datetime-time-input')),
+};
+
+/**
+ * Property Menu selectors
+ */
+export const PropertyMenuSelectors = {
+  // Property type trigger button
+  propertyTypeTrigger: () => cy.get(byTestId('property-type-trigger')),
+  
+  // Property type option by field type number
+  propertyTypeOption: (fieldType: number) => cy.get(byTestId(`property-type-option-${fieldType}`)),
+  
+  // Grid new property button
+  newPropertyButton: () => cy.get(byTestId('grid-new-property-button')),
+  
+  // Edit property menu item
+  editPropertyMenuItem: () => cy.get(byTestId('grid-field-edit-property')),
+};
+
+/**
+ * Field Types enum for database columns
+ */
+export const FieldType = {
+  RichText: 0,
+  Number: 1,
+  DateTime: 2,
+  SingleSelect: 3,
+  MultiSelect: 4,
+  Checkbox: 5,
+  URL: 6,
+  Checklist: 7,
+  LastEditedTime: 8,
+  CreatedTime: 9,
+  Relation: 10,
+  AISummaries: 11,
+  AITranslations: 12,
+  FileMedia: 14
+};
+
 export function waitForReactUpdate(ms: number = 500) {
   return cy.wait(ms);
 }