Chore/refactor req builder test

e2e/fixtures/api.fixture.ts

@@ -1,16 +1,36 @@
-import {test as base} from '@playwright/test'
+import {test as base} from './base.fixture'
 import { APImodel } from '../object-models/api-model'
 
 interface MyFixtures {
-    api : APImodel
+    apiReq : APImodel,
+    preHeaders : void,
+    preVariables : void
 }
 
 
 export const test = base.extend<MyFixtures>(
     {
-        api : async({page},use) => {
+        apiReq : async({page},use) => {
             use(new APImodel(page))
+        },
+        preVariables : async({page, apiReq},use) => {
+            await apiReq.chainVariableAdd('chainVar1', 'val1')
+            await apiReq.chainVariableAdd('chainVar2', 'val2')
+            await apiReq.scriptVariableAdd('scriptVar1', 'val1')
+            await apiReq.scriptVariableAdd('scriptVar2', 'val2')
+            await use()
+        },
+        preHeaders  : async ({page, apiReq},use) => {
+            const[name1, name2, name3] = ['author1', 'author2','author3']
+            const[value1, value2, value3] = ['val1', 'val2', 'val3']
+            await apiReq.fillHeader(name1, value1)
+            await apiReq.fillHeader(name2, value2)
+            await apiReq.fillHeader(name3, value3)
+            await use()
         }
-    })
+    }
+)
+
+
 
 export {expect} from '@playwright/test'

e2e/fixtures/base.fixture.ts

@@ -0,0 +1,27 @@
+import {test as base, type Page} from '@playwright/test'
+
+
+export const test = base.extend<{},{throtle:void}>({
+    throtle : [ async({},use) => {
+                        console.log('!!using new worker!')
+            use()
+
+    }, {scope:'worker'}],
+
+    page : async({page},use) => {
+        if(process.env.THROTLE) {
+                    (async () => {
+                        const context = await page.context()
+                        const cdpSession = await context.newCDPSession(page);
+                        await cdpSession.send('Emulation.setCPUThrottlingRate', { rate: 3 });
+
+                    })()
+                }
+        await page.goto('/')
+        await use(page)
+    },
+
+
+})
+
+export {expect, type Page} from '@playwright/test'

e2e/fixtures/chain.fixtures.ts

@@ -1,4 +1,4 @@
-import {test as base } from '@playwright/test'
+import {test as base } from './base.fixture'
 import {ChainModel}  from '../object-models/chain-object'
 
 interface myFixtures {
@@ -9,8 +9,6 @@ interface myFixtures {
 export const test = base.extend<myFixtures>
 ({
     singleChain : async ({page},use) => {
-            // 1. go to page
-                await page.goto('/')
             // 2. add new chain
             const chain = new ChainModel(page)
             await chain.addNewChain('User Chain')
@@ -24,7 +22,6 @@ export const test = base.extend<myFixtures>
     },
 
     multiChain : async({page},use) => {
-            await page.goto('/')
             const chain = new ChainModel(page)
             for(let i=1; i<11; i++) {
                 await chain.addNewChain(`User Chain ${i}`)

e2e/fixtures/collection.fixture.ts

@@ -0,0 +1,33 @@
+import {test as base, Page } from '../fixtures/base.fixture'
+import { CollectionModel } from '../object-models/collection-model'
+import { APImodel } from '../object-models/api-model'
+import { EnvSettings } from '../object-models/environment-setting.model'
+
+export const test = base.extend<{
+    collection: CollectionModel, 
+    apiReq: APImodel,
+    envSetup : EnvSettings,
+    singleCollection: Page,
+    preVariables : void,
+    preHeaders : void
+}>
+({
+    collection : async({page}, use) => {
+        await use(new CollectionModel(page))
+    },
+    apiReq : async ({page},use) => {
+        await use(new APImodel(page))
+    },
+    envSetup: async({page},use) => {
+        use(new EnvSettings(page))
+    },
+    singleCollection : async({page, collection, apiReq},use) => {
+        await collection.createCollection('User Collection')
+        await apiReq.get('https://jsonplaceholder.typicode.com/todos/1')
+        await collection.saveToCollection('Req 1', 'User Collection')
+        await use(page)
+    },
+
+}) 
+
+export { expect} from '@playwright/test'

e2e/fixtures/index.ts

@@ -0,0 +1,7 @@
+import { mergeTests } from "@playwright/test";
+import {test as apiTest} from "./api.fixture"
+import {test as chainTest} from "./chain.fixtures"
+import {test as collectionTest} from "./collection.fixture"
+
+export const test = mergeTests(apiTest, chainTest, collectionTest)
+export {expect} from '@playwright/test'

e2e/object-models/BasePage.ts

@@ -1,22 +1,22 @@
-import {type Page, Locator} from '@playwright/test'
-
-
+import { type Page, Locator } from '@playwright/test'
 
 export class BasePage {
-    constructor(protected page:Page) {}
+    constructor(protected page: Page) {
+    }
+
+    optionSection: Locator = this.page.locator('#_R_jklrlb_')
+    reqBuilderMain: Locator = this.page.locator('#_R_5klrlb_')
+    topHeader: Locator = this.page.getByRole('banner')
 
-    protected button(btnName: string): Locator
-    {
-        return this.page.getByRole('button', {name: btnName})
+    protected button(btnName: string): Locator {
+        return this.page.getByRole('button', { name: btnName })
     }
 
-    protected fillBlock (input: string): Locator 
-    {
+    protected fillBlock(input: string): Locator {
         return this.page.getByPlaceholder(input)
     }
 
-    protected async clearall(locator: Locator) 
-    {
+    protected async clearall(locator: Locator) {
         await locator.press('Control+A')
         await locator.clear()
     }

e2e/object-models/api-model.ts

@@ -1,63 +1,71 @@
 import {type Page, type Locator} from '@playwright/test'
-import { BasePage } from './BasePage'
+import { ReqHelpers } from './request-assiters.model' 
 
-export class APImodel extends  BasePage {
+export class APImodel extends  ReqHelpers {
 
     constructor(page:Page) 
         {super(page)
         }
 
-        fillUrl      : Locator = this.page.getByPlaceholder('https://api.example.com/endpoint')
-        sendBtn      : Locator = this.page.getByRole('button', {name:'Send'})
-        responseBody : Locator = this.page.locator('div').filter({hasText:'Body'}) 
-                                                         .filter({hasText:'Compare'}).last()                   
-                                                         .getByRole('presentation')
-        reqType      : Locator = this.page.getByRole('combobox')
-        reqBody      : Locator = this.page.locator('div',{hasText:'Request Body (JSON)',
-                                                has: this.page.getByRole('presentation')})
-                                            .last()
-                                            .getByRole('textbox') 
+        reqMainHeading : Locator = this.reqBuilderMain.getByRole('heading', {name: 'Request Builder'})
+
+        fillUrl         : Locator = this.reqBuilderMain.getByPlaceholder('https://api.example.com/endpoint')
+        sendBtn         : Locator = this.reqBuilderMain.getByRole('button', {name:'Send'})
+        responseSec     : Locator = this.page.locator('#_R_9klrlb_')
+        responseBody    : Locator = this.responseSec.getByRole('presentation')
+        reqType         : Locator = this.reqBuilderMain.getByRole('combobox')
+        reqBodySection  : Locator = this.reqBuilderMain.locator('div',{hasText:'Headers'}).getByRole('button',{name: 'Body'})
+        reqBody         : Locator = this.reqBuilderMain.locator('div').filter({has: this.page.getByRole('presentation')})
+                                                        .filter({hasText:'Request Body (JSON)'}).last()
+                                                        .getByRole('textbox') 
+
 
     async get(url:string):Promise<string> 
     {
         await this.fillUrl.fill(url)
 
         await this.reqType.selectOption('GET')
-        await this.sendBtn.click()
-        return await this.getResponseResult()
     }
 
     async post(url: string, data : string) 
-    {
-        await this.fillUrl.fill(url)
-        await this.reqType.selectOption('POST')
-        await this.fillRequestBody(data)
-        await this.sendBtn.click()
-        return await this.getResponseResult()
-    }
+        {await this.apiwrap('POST', url, data)}
 
     async patch(url: string, data: string) 
-    {
-        await this.fillUrl.fill(url)
-        await this.reqType.selectOption('PATCH')
-        await this.fillRequestBody(data)
-        await this.sendBtn.click()
-        return await this.getResponseResult()
-    }
+        {await this.apiwrap('PATCH', url, data)}
 
-    private async fillRequestBody (data: string) 
-    {
+    private async fillRequestBody (data: string) {
         await this.clearall(this.reqBody)
         await this.reqBody.fill(data)
     }
 
-    private async getResponseResult() 
-    {
-        await this.page.waitForLoadState('domcontentloaded')
+    async getResponseResult(collectionName?:string, reqName?:string) {
+        if(collectionName && reqName){
+            const neededReq = await this.optionSection.getByRole('button',{name: reqName})
+            if (await neededReq.isVisible()) {
+                await neededReq.click()
+            } else {
+                await this.selectReq(collectionName, reqName)
+            }
+        }
+        await this.sendBtn.click()
+        await this.page.waitForLoadState('networkidle')
         await this.responseBody.locator('.view-line').last().textContent()
         let result = await this.responseBody.textContent()
         result = result.replace(/\u00A0/g, ' ')
         return result
     }
+
+    private async apiwrap(method:string, url:string, data: string) {{
+        await this.fillUrl.fill(url)
+        await this.reqType.selectOption(method)
+        await this.reqBodySection.click()
+        await this.fillRequestBody(data)
+        }
+    }
+
 
+    async selectReq(collName:string, reqName:string) {
+        await this.optionSection.getByRole('button',{name:collName}).click()
+        await this.optionSection.getByRole('button',{name: reqName}).click()
+    }
 }

e2e/object-models/collection-model.ts

@@ -7,7 +7,7 @@ export class CollectionModel extends BasePage {
     constructor(page: Page) {
         super(page)
     }
-
+    saveToCollectionBtn : Locator = this.page.getByTitle('Save to collection')
 
     async createCollection(colName: string) 
     {
@@ -19,13 +19,13 @@ export class CollectionModel extends BasePage {
 
     async saveToCollection(postNam: string, collNam: string) 
     {
-        await this.page.getByTitle('Save to collection').click()
+        await this.saveToCollectionBtn.click()
         // get the collection block
         const collDiv = await this.page.locator('div')
                                        .filter({ hasText: 'Request Name (optional)' })
                                        .filter({ hasText: 'Select Collection' }).last()
         await collDiv.getByRole('textbox').fill(postNam)
         await collDiv.getByRole('button').filter({ hasText: collNam }).click()
-        await collDiv.getByLabel('Request Name (optional)').waitFor({ state: 'hidden' })
+        await collDiv.waitFor({ state: 'detached' })
     }
 }