Upgrade Playwright to v1.37.0 and Synthetics to v1.4.0. (#457)

README.md

@@ -59,11 +59,11 @@ npm run dev
 
 #### Managing Playwright dependency
 
-When updating the version of [@elastic/synthetics](https://github.com/elastic/synthetics)(called _Synthetics agent_ hereafter), it is important to align the version of Playwright that the Synthetics agent uses and the forked Playwright that is installed by the recorder. Steps to update the Playwright is as followed:
+When updating the version of [@elastic/synthetics](https://github.com/elastic/synthetics)(called _Synthetics agent_ hereafter), it is important to align the version of Playwright that the Synthetics agent uses and the forked Playwright that is installed by the recorder. Follow the steps below to update the Playwright fork.
 
 1. Go to [@elastic/playwright](https://github.com/elastic/playwright), fetch upstream microsoft:main into main if needed. We keep our modifications in `synthetics-recorder` branch. It is supposed to have only one extra commit[(84309bf)](https://github.com/elastic/playwright/commit/84309bf44d2a97889b178f2f2da2bc9f30e5aff8)) compared to the main branch. If main branch has new commits, fetch the changes into `synthetics-recorder` branch by pulling it with [rebase](https://git-scm.com/docs/git-pull#Documentation/git-pull.txt---rebasefalsetruemergesinteractive) option
 
-1. Pull the remote changes to your machine. If necessary, set the remote as follows:
+2. Pull the remote changes to your machine. If necessary, set the remote as follows:
 
 ```
 git remote add upstream https://github.com/microsoft/playwright.git
@@ -76,46 +76,49 @@ git remote -v
 // elastic  https://github.com/elastic/playwright.git (push)
 ```
 
-2. Confirm the Playwright version from Synthetics agent's `package.json`:
+3. Confirm the Playwright version from Synthetics agent's `package.json`:
 
 ```
 // @elastic/synthetics's package.json
 ...
-    "playwright-core": "=1.20.1",
+    "playwright-core": "=1.37.0",
 ...
 ```
 
-3. Fetch the tags from upstream, checkout to the version 1.20.1, and create a new branch:
+4. Fetch the tags from upstream, checkout to the version 1.37.0, and create a new branch:
 
 ```
 git fetch upstream --tags
-git checkout -b 1.20.1-recorder v1.20.1
+git checkout -b 1.37.0-recorder v1.37.0
 ```
 
-4. Cherry-pick the commit from `synthetics-recorder` branch, then run `npm run build`.Make sure you've uncommented [packages/playwright-core/lib](https://github.com/elastic/playwright/blob/f3441b1d93091725ba929e2ec8dbc70cefc081ef/.gitignore#L14) in `.gitignore` to include all the generated libs file. Check all the files under `packages/playwright-core/lib` are staged, then commit and push it to elastic remote:
+5. Cherry-pick the commit from `synthetics-recorder` branch, then run `npm run build`.Make sure you've uncommented [packages/playwright-core/lib](https://github.com/elastic/playwright/blob/f3441b1d93091725ba929e2ec8dbc70cefc081ef/.gitignore#L14) in `.gitignore` to include all the generated libs file. Check all the files under `packages/playwright-core/lib` are staged, then commit and push it to elastic remote:
+
+**NOTE:** it is likely you will need to do some additional cleanup, as the `cherry-pick` described below does not always transfer the changes perfectly. You can reference the diff from [this commit](https://github.com/elastic/playwright/commit/d4e68eb0467e9ac9409ca42b55cafbb36d3dc7f3) to the `1.37.0` version bump to see some of the additional changes.
 
 ```
 git cherry-pick 84309bf
 # solve conflicts if necessary
-npm run build
 # uncomment `!packages/playwright-core/lib/` in .gitignore (L14)
+npm run build
 git add .
 git commit -m "feat: generate libs"
-git push  --set-upstream elastic 1.20.1-recorder
+git push  --set-upstream elastic 1.37.0-recorder
 ```
 
-5. Test new changes in the Recorder by updating Recorder's package.json. Update `playwright` dependency to the branch you pushed from above step:
+6. Test new changes in the Recorder by updating Recorder's package.json. Update `playwright` dependency to the branch you pushed from above step:
 
 ```js
 // @elastic/synthetics-recorder's package.json
 ...
-    "playwright": "https://gitpkg.now.sh/elastic/playwright/packages/playwright-core?1.20.1-recorder",
+    "playwright": "https://gitpkg.now.sh/elastic/playwright/packages/playwright-core?1.37.0-recorder",
 ...
 ```
 
 For now, we are doing it all manually, However, we should consider automating the process.
 
 ##### Javascript Codegen
+
 We generate tailored javascript files for synthetics agent, and we keep that piece of code in the recorder([temporarily](https://github.com/elastic/synthetics-recorder/issues/295)), so this can be outdated even though we've updated the Playwright fork. When we update Playwright, it is also advisable to review the [JavascriptLanguageGenerator](https://github.com/elastic/playwright/blob/main/packages/playwright-core/src/server/recorder/javascript.ts#L28) and update our [codegen code](https://github.com/elastic/synthetics-recorder/blob/main/electron/syntheticsGenerator.ts#L151) inherited the class, especially `generateAction` function that we override.
 
 ### Build

electron/api/runJourney.ts

@@ -127,8 +127,7 @@ export async function runJourney(
   try {
     const isProject = data.isProject;
     const args = [
-      '--playwright-options',
-      '{"headless": false}',
+      '--no-headless',
       '--reporter=json',
       '--screenshots=off',
       '--no-throttling',