SPIKE: Playwright Target Architecture

Owned by AJ Jobanputra
Last updated: Sept 06, 2024
3 min read

 

 

 

 

gtp_extension_arch_diagram_0.1.drawio.png

 

GTP Execution Engine

  • Runtime: NodeJS

  • Description: Takes test script as input and executes on playwright.
    Executes npx test

  • Test results recieved via Playwright Custom Reporter

PROS

  • similar to lambdatest results

  • includes

    • has whole test object

    • test step and results

    • provides data on_step_begin(), on_step_end()

CONS

  • doesn’t have DOM

  • doesn’t have browser console

  • doesn’t have access to dynamic variables for data driven tests

GTP Front End Application

  • Script Detail Component

  • Script Service Component

GTP Springboot Application

Sample pseudo code

gtp-crome-extension //gtp-script-execution.js mainbrowser = playwright.webdriver.attach (tab1,....) for step in steps variables = datasetcsv[i+1] if step == click // pre_processing before each step initialize_data() //run step playwright.gtp_click() // <-- playwright generated script //post processing record_step_results(step, dom, console, network) if step == assert_text // pre_processing before each step initialize_data() //run step await page.getByPlaceholder().click(); //works eval('await page.getByPlaceholder().click();') // THIS DOESNT WORK IT IS SECURITY VIOLATION TO DYNAMICALLY RUN ANY COMMAND WITH THE PAGE await page.goto('https://demo.playwright.dev/todomvc/#/'); await page.getByPlaceholder().click(); // DYNAMICALLY CALL THE STEP await page.'step.locator.method()'(step.parms['locatorid']).fill(step.parms['filltext']); // PROBLEM: METHODS ARE DYNAMIC NOT ONLY THE PARAMETERS //post processing record_step_results(step, dom, console, network) // in first version we don't support all steps if step == drag_and_drop not_supported() if step == mfa initialize_data() custom_feature() record_step_results(step, dom, console, network)
image-20240906-145429.png

 

Front End Discussion

move towards design where the web app only displays the steps and the chrome extension is the test case editor that provides support for:

  • test edit - step add,edit,delete

    • edit locator

    • record steps

    • playback steps

Technical Solution:

  • do we use angular/react/microfrontends for the front end in chrome extension. @Assad zakir , @Ahmer Khan (Unlicensed)

What are steps that aren’t possible with local execution

  • @Vinay Christopher pls create list of steps that are on remote execution and not supported on local execution

    • see if customer are using them; if not, we won’t support in 1st / 2nd release

    • ask @harish.kanta to manage these in backlog priority.