diff --git a/apps/studio/e2e/blueprints.test.ts b/apps/studio/e2e/blueprints.test.ts index fffc3775c7..3ec0e17ad2 100644 --- a/apps/studio/e2e/blueprints.test.ts +++ b/apps/studio/e2e/blueprints.test.ts @@ -71,7 +71,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to get admin URL - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify theme was installed @@ -106,7 +106,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to get admin URL - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify theme was activated @@ -143,7 +143,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to get admin URL - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify plugin was installed @@ -178,7 +178,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to get admin URL - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify plugin was activated @@ -216,7 +216,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to verify site is accessible - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify the site was created successfully and admin is accessible @@ -254,7 +254,7 @@ test.describe( 'Blueprints', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Navigate to Settings tab to verify site is accessible - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Verify the site was created successfully and admin is accessible diff --git a/apps/studio/e2e/import-export.test.ts b/apps/studio/e2e/import-export.test.ts index 91131c0388..9ec0d5e0ce 100644 --- a/apps/studio/e2e/import-export.test.ts +++ b/apps/studio/e2e/import-export.test.ts @@ -37,7 +37,7 @@ test.describe( 'Import / Export', () => { const siteContent = new SiteContent( session.mainWindow, defaultSiteName ); // Navigate to the Import / Export tab - const tab = await siteContent.navigateToTab( 'Import / Export' ); + const tab = await siteContent.navigateToTab( 'import-export' ); // TypeScript doesn't narrow the union type, so we need to assert it // We know it's ImportExportTab because we passed 'Import / Export' diff --git a/apps/studio/e2e/import.test.ts b/apps/studio/e2e/import.test.ts index 2b7317347e..9e0dd6efcd 100644 --- a/apps/studio/e2e/import.test.ts +++ b/apps/studio/e2e/import.test.ts @@ -72,7 +72,7 @@ test.describe( 'Import', () => { await expect( siteContent.siteNameHeading ).toHaveText( siteName ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); await expect( siteContent.siteNameHeading ).toHaveText( siteName ); const frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp ); expect( frontendUrl ).not.toBeNull(); diff --git a/apps/studio/e2e/localization.test.ts b/apps/studio/e2e/localization.test.ts index 03028388ff..e0d228248a 100644 --- a/apps/studio/e2e/localization.test.ts +++ b/apps/studio/e2e/localization.test.ts @@ -149,7 +149,7 @@ test.describe( 'Localization', () => { await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } ); await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); - const settingsTabButton = session.mainWindow.getByRole( 'tab', { name: /Settings|設定/i } ); + const settingsTabButton = session.mainWindow.locator( '[role="tab"][id$="-settings"]' ); await settingsTabButton.click(); const copyWpAdminButton = session.mainWindow.getByTestId( 'copy-wp-admin-url' ); await expect( copyWpAdminButton ).toBeVisible(); @@ -175,7 +175,7 @@ test.describe( 'Localization', () => { } ); const siteContentEnglish = new SiteContent( session.mainWindow, siteName ); - const settingsTab = await siteContentEnglish.navigateToTab( 'Settings' ); + const settingsTab = await siteContentEnglish.navigateToTab( 'settings' ); await settingsTab.openDeleteSiteModal(); // Wait for the confirmation dialog to be auto-confirmed and deletion to complete diff --git a/apps/studio/e2e/page-objects/import-export-tab.ts b/apps/studio/e2e/page-objects/import-export-tab.ts index a39b242609..ec17d0f9be 100644 --- a/apps/studio/e2e/page-objects/import-export-tab.ts +++ b/apps/studio/e2e/page-objects/import-export-tab.ts @@ -4,7 +4,7 @@ export default class ImportExportTab { constructor( private page: Page ) {} get locator() { - return this.page.getByRole( 'tabpanel', { name: 'Import / Export' } ); + return this.page.locator( '[role="tabpanel"][id$="-import-export-view"]' ); } get importDropZone() { diff --git a/apps/studio/e2e/page-objects/settings-tab.ts b/apps/studio/e2e/page-objects/settings-tab.ts index a026d1de9d..30765813c4 100644 --- a/apps/studio/e2e/page-objects/settings-tab.ts +++ b/apps/studio/e2e/page-objects/settings-tab.ts @@ -7,7 +7,7 @@ export default class SettingsTab { ) {} get locator() { - return this.page.getByRole( 'tabpanel', { name: 'Settings' } ); + return this.page.locator( '[role="tabpanel"][id$="-settings-view"]' ); } get copyWPAdminButton() { diff --git a/apps/studio/e2e/page-objects/site-content.ts b/apps/studio/e2e/page-objects/site-content.ts index cc23b6a54a..75e19f2df4 100644 --- a/apps/studio/e2e/page-objects/site-content.ts +++ b/apps/studio/e2e/page-objects/site-content.ts @@ -36,30 +36,30 @@ export default class SiteContent { return this.locator.getByLabel( 'Copy site url', { exact: false } ); } - getTabButton( tabName: 'Preview' | 'Settings' | 'Import / Export' ) { - return this.locator.getByRole( 'tab', { name: tabName } ); + getTabButton( tab: 'preview' | 'settings' | 'import-export' ) { + return this.locator.locator( `[role="tab"][id$="-${ tab }"]` ); } - async navigateToTab( tabName: 'Settings' ): Promise< SettingsTab >; - async navigateToTab( tabName: 'Import / Export' ): Promise< ImportExportTab >; + async navigateToTab( tab: 'settings' ): Promise< SettingsTab >; + async navigateToTab( tab: 'import-export' ): Promise< ImportExportTab >; async navigateToTab( - tabName: 'Preview' | 'Settings' | 'Import / Export' + tab: 'preview' | 'settings' | 'import-export' ): Promise< SettingsTab | ImportExportTab > { - const tabButton = this.getTabButton( tabName ); + const tabButton = this.getTabButton( tab ); await tabButton.click(); - switch ( tabName ) { - case 'Preview': + switch ( tab ) { + case 'preview': throw new Error( 'Not implemented' ); - case 'Settings': { - const tab = new SettingsTab( this.page, this.siteName ); - await expect( tab.locator ).toBeVisible(); - return tab; + case 'settings': { + const settingsTab = new SettingsTab( this.page, this.siteName ); + await expect( settingsTab.locator ).toBeVisible(); + return settingsTab; } - case 'Import / Export': { - const tab = new ImportExportTab( this.page ); - await expect( tab.locator ).toBeVisible(); - return tab; + case 'import-export': { + const importExportTab = new ImportExportTab( this.page ); + await expect( importExportTab.locator ).toBeVisible(); + return importExportTab; } } } diff --git a/apps/studio/e2e/site-navigation.test.ts b/apps/studio/e2e/site-navigation.test.ts index 9a56392324..cc954fd290 100644 --- a/apps/studio/e2e/site-navigation.test.ts +++ b/apps/studio/e2e/site-navigation.test.ts @@ -52,7 +52,7 @@ test.describe( 'Site Navigation', () => { await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } ); // Get site URLs for tests - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp ); } ); diff --git a/apps/studio/e2e/sites.test.ts b/apps/studio/e2e/sites.test.ts index 1e8bda4310..d9995efa4f 100644 --- a/apps/studio/e2e/sites.test.ts +++ b/apps/studio/e2e/sites.test.ts @@ -72,7 +72,7 @@ test.describe( 'Sites', () => { // Check a WordPress site has been created expect( await pathExists( path.join( localPath, 'wp-config.php' ) ) ).toBe( true ); - await siteContent.navigateToTab( 'Settings' ); + await siteContent.navigateToTab( 'settings' ); await expect( siteContent.frontendButton ).toBeVisible(); const frontendUrl = await siteContent.frontendButton.textContent(); @@ -89,7 +89,7 @@ test.describe( 'Sites', () => { const newPhpVersion = ALLOWED_PHP_VERSIONS.find( ( v ) => v !== DEFAULT_PHP_VERSION ) || '8.2'; const siteContent = new SiteContent( session.mainWindow, DEFAULT_SITE_NAME ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); await settingsTab.editSiteButton.click(); await expect( settingsTab.editSiteDialog ).toBeVisible(); @@ -123,7 +123,7 @@ test.describe( 'Sites', () => { const newSiteName = 'E2E-Test-Site-Renamed'; const siteContent = new SiteContent( session.mainWindow, siteName ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); await settingsTab.editSiteButton.click(); await expect( settingsTab.editSiteDialog ).toBeVisible(); @@ -143,7 +143,7 @@ test.describe( 'Sites', () => { const { siteName } = await completeOnboardingWithParams(); const siteContent = new SiteContent( session.mainWindow, siteName ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); const frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp ); @@ -165,7 +165,7 @@ test.describe( 'Sites', () => { expect( await pathExists( path.join( localPath, 'wp-config.php' ) ) ).toBe( true ); const siteContent = new SiteContent( session.mainWindow, siteName ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); // Playwright lacks support for interacting with native dialogs, so we mock // the dialog module to simulate the user clicking the "Delete site" @@ -191,7 +191,7 @@ test.describe( 'Sites', () => { const { siteName, localPath } = await completeOnboardingWithParams(); const siteContent = new SiteContent( session.mainWindow, siteName ); - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); // Playwright lacks support for interacting with native dialogs, so we mock // the dialog module to simulate the user clicking the "Delete site" diff --git a/apps/studio/src/components/tests/site-content-tabs.test.tsx b/apps/studio/src/components/tests/site-content-tabs.test.tsx index c87b37d906..15687ebf48 100644 --- a/apps/studio/src/components/tests/site-content-tabs.test.tsx +++ b/apps/studio/src/components/tests/site-content-tabs.test.tsx @@ -86,7 +86,7 @@ describe( 'SiteContentTabs', () => { loadingServer: {}, } ); await act( async () => renderWithProvider( ) ); - expect( screen.getByRole( 'tab', { name: 'Settings' } ) ).toBeInTheDocument(); + expect( screen.getByRole( 'tab', { name: 'Site Settings' } ) ).toBeInTheDocument(); expect( screen.getByRole( 'tab', { name: 'Sync' } ) ).toBeInTheDocument(); expect( screen.getByRole( 'tab', { name: 'Previews' } ) ).toBeInTheDocument(); expect( screen.getByRole( 'tab', { name: 'Import / Export' } ) ).toBeInTheDocument(); @@ -104,7 +104,7 @@ describe( 'SiteContentTabs', () => { expect( screen.queryByRole( 'tab', { name: 'Overview', selected: true } ) ).toBeVisible(); expect( screen.queryByRole( 'tab', { name: 'Sync', selected: false } ) ).toBeVisible(); expect( screen.queryByRole( 'tab', { name: 'Previews', selected: false } ) ).toBeVisible(); - expect( screen.queryByRole( 'tab', { name: 'Settings', selected: false } ) ).toBeVisible(); + expect( screen.queryByRole( 'tab', { name: 'Site Settings', selected: false } ) ).toBeVisible(); expect( screen.queryByRole( 'tab', { name: 'Studio Code', selected: false } ) ).toBeVisible(); expect( screen.queryByRole( 'tab', { name: 'Backup', selected: false } ) diff --git a/apps/studio/src/hooks/use-content-tabs.tsx b/apps/studio/src/hooks/use-content-tabs.tsx index 5c7e3283a2..43d1abc89c 100644 --- a/apps/studio/src/hooks/use-content-tabs.tsx +++ b/apps/studio/src/hooks/use-content-tabs.tsx @@ -37,7 +37,7 @@ function useTabs() { { order: 5, name: 'settings', - title: __( 'Settings' ), + title: __( 'Site Settings' ), } ); diff --git a/tools/metrics/tests/site-editor.test.ts b/tools/metrics/tests/site-editor.test.ts index 77c2bdfaa1..76e99dbe45 100644 --- a/tools/metrics/tests/site-editor.test.ts +++ b/tools/metrics/tests/site-editor.test.ts @@ -47,7 +47,7 @@ test.describe( 'Site Editor Load Metrics', () => { await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } ); // Get the WordPress admin URL from settings - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp ); // Remove trailing slash if present wpAdminUrl = wpAdminUrl.replace( /\/$/, '' ); diff --git a/tools/metrics/tests/site-startup.test.ts b/tools/metrics/tests/site-startup.test.ts index 440385efb4..0289313671 100644 --- a/tools/metrics/tests/site-startup.test.ts +++ b/tools/metrics/tests/site-startup.test.ts @@ -79,7 +79,7 @@ test.describe( 'Startup Metrics', () => { // Delete the site after test await test.step( 'Delete the site', async () => { - const settingsTab = await siteContent.navigateToTab( 'Settings' ); + const settingsTab = await siteContent.navigateToTab( 'settings' ); await session.electronApp.evaluate( ( { dialog } ) => { dialog.showMessageBox = async () => { return { response: 0, checkboxChecked: true };