feat: playground improvements (#57)

* test: adapt playground tests to improvements from UI

* test(playground): update element selectors for consistency

- Replace `getByRole` selector with `getByTestId` for Send button
- Update selector for server input in CustomServerSelect to use test ID

Author: vOrigins

src/packages/portal/pages/PortalPage/OperationPage/PlaygroundPanel.ts

@@ -6,7 +6,7 @@ import { CustomServerSelect } from './PlaygroundPanel/CustomServerSelect'
 export class PlaygroundPanel extends BaseComponent {
 
   readonly serverSlt = new CustomServerSelect(this.page)
-  readonly sendBtn = new Button(this.mainLocator.getByRole('button', { name: 'Send' }), 'Send')
+  readonly sendBtn = new Button(this.mainLocator.getByTestId('SendButton'), 'Send')
   readonly tokenTxtFld = new TextField(this.mainLocator.locator('label:has-text("Token")+span+div'), 'Token')
   readonly textFilterTxtFld = new TextField(this.mainLocator.locator('label:has-text("textFilter")+span+div'), 'textFilter')
   readonly typesTxtFld = new TextField(this.mainLocator.locator('label:has-text("types")+span+div'), 'textFilter')

src/packages/portal/pages/PortalPage/OperationPage/PlaygroundPanel/AddCustomServerDialog.ts

@@ -7,7 +7,7 @@ export class AddCustomServerDialog extends BaseAddDialog {
   readonly cloudAc = new Autocomplete(this.rootLocator.getByTestId('CloudAutocomplete'), 'Cloud')
   readonly namespaceAc = new Autocomplete(this.rootLocator.getByTestId('NamespaceAutocomplete'), 'Namespace')
   readonly serviceAc = new Autocomplete(this.rootLocator.getByTestId('ServiceAutocomplete'), 'Service')
-  readonly urlTxtFld = new TextField(this.rootLocator.getByTestId('ServerUrlTextInput'), 'Server URL')
+  readonly urlTxtFld = new TextField(this.rootLocator.getByTestId('ServerUrlTextField'), 'Server URL')
 
   constructor(page: Page) {
     super(page)

src/packages/portal/pages/PortalPage/OperationPage/PlaygroundPanel/CustomServerSelect.ts

@@ -2,10 +2,9 @@ import { Button, Select } from '@shared/components/base'
 import { type Page } from 'playwright/test'
 
 export class CustomServerSelect extends Select {
-
-  readonly addCustomServerBtn = new Button(this.page.getByRole('option', { name: 'Add Custom Server' }), 'Add Custom Server')
+  readonly addCustomServerBtn = new Button(this.page.getByTestId('AddCustomServerButton'), 'Add Custom Server')
 
   constructor(page: Page) {
-    super(page.getByTestId('PlaygroundPanel').locator('.MuiInputBase-root'), 'Custom Server')
+    super(page.getByTestId('PlaygroundPanel').getByTestId('ServerSelect'), 'Custom Server')
   }
 }

src/tests/portal/11-operations-details/11.1.1-details-rest-api-package.spec.ts

@@ -246,9 +246,9 @@ test.describe('11.1.1 Operations details REST API (Package)', () => {
 
         await expect(operationPage.playgroundPanel.serverSlt.getListItem()).toHaveCount(4) //The "Add Custom Server" button is also a list item
         // Covering TestCase-B-1221
-        await expect(operationPage.playgroundPanel.serverSlt.getListItem('Petstore server https://petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
-        await expect(operationPage.playgroundPanel.serverSlt.getListItem('Petstore server https://dev.petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
-        await expect(operationPage.playgroundPanel.serverSlt.getListItem('Petstore server https://test.petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
+        await expect(operationPage.playgroundPanel.serverSlt.getListItem('https://petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
+        await expect(operationPage.playgroundPanel.serverSlt.getListItem('https://dev.petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
+        await expect(operationPage.playgroundPanel.serverSlt.getListItem('https://test.petstore.swagger.io/api/v1', { exact: false })).toBeVisible()
       })
 
       await test.step('Add Custom servers', async () => {
@@ -266,12 +266,12 @@ test.describe('11.1.1 Operations details REST API (Package)', () => {
 
         await test.step('Add server 1', async () => {
           await operationPage.playgroundPanel.serverSlt.addCustomServerBtn.click() //WA: remove after fix previous step
-          await operationPage.playgroundPanel.addServerDialog.cloudAc.clear()
+
           await operationPage.playgroundPanel.addServerDialog.urlTxtFld.fill('https://api')
           await operationPage.playgroundPanel.addServerDialog.addBtn.click()
           await operationPage.playgroundPanel.serverSlt.click()
 
-          await expect(operationPage.playgroundPanel.serverSlt.getListItem('Custom Server 1', { exact: false })).toBeVisible()
+          await expect(operationPage.playgroundPanel.serverSlt.getListItem('https://api', { exact: false })).toBeVisible()
         })
 
         await test.step('Add server 2 and select it', async () => {
@@ -280,10 +280,10 @@ test.describe('11.1.1 Operations details REST API (Package)', () => {
           await operationPage.playgroundPanel.addServerDialog.addBtn.click()
           await operationPage.playgroundPanel.serverSlt.click()
 
-          await expect(operationPage.playgroundPanel.serverSlt.getListItem('Custom Server 1', { exact: false })).toBeVisible() //Cover TestCase-A-4737
-          await expect(operationPage.playgroundPanel.serverSlt.getListItem('Custom Server 2', { exact: false })).toBeVisible()
+          await expect(operationPage.playgroundPanel.serverSlt.getListItem('https://api', { exact: false })).toBeVisible() //Cover TestCase-A-4737
+          await expect(operationPage.playgroundPanel.serverSlt.getListItem(getPlaygroundCustomServer(), { exact: false })).toBeVisible()
 
-          await operationPage.playgroundPanel.serverSlt.getListItem('Custom Server 2', { exact: false }).click()
+          await operationPage.playgroundPanel.serverSlt.getListItem(getPlaygroundCustomServer(), { exact: false }).click()
         })
       })