Repository: elastic/synthetics
Pull request #385 (2021-09-27 19:34:29)

feat: introduce more commands to formatter
+ Necessary for the recorder assertions
+ Does a regex match instead of a strict match for text content and inner text.
+ Added more assertions like isEditable, isChecked extra that is missing. 

apmmachine: 
## :broken_heart: Tests Failed


<!-- BUILD BADGES-->
> _the below badges are clickable and redirect to their specific view in the CI or DOCS_
[![Pipeline View](https://img.shields.io/badge/pipeline-pipeline%20-green)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//pipeline) [![Test View](https://img.shields.io/badge/test-test-green)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//tests) [![Changes](https://img.shields.io/badge/changes-changes-green)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//changes) [![Artifacts](https://img.shields.io/badge/artifacts-artifacts-yellow)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//artifacts) [![preview](https://img.shields.io/badge/docs-preview-yellowgreen)](http://synthetics_385.docs-preview.app.elstc.co/diff)  [![preview](https://img.shields.io/badge/elastic-observability-blue)](https://ci-stats.elastic.co/app/apm/services/apm-ci/transactions/view?rangeFrom=2021-09-27T19:24:41.676Z&rangeTo=2021-09-27T19:44:41.676Z&transactionName=apm-agent-rum/elastic-synthetics/PR-{number}&transactionType=unknown&latencyAggregationType=avg&traceId=de93ddc440cfb26ba3a2afd6e4510dc1&transactionId=4d34e3b9479ca9df)

<!-- BUILD SUMMARY-->
<details><summary>Expand to view the summary</summary>
<p>

#### Build stats




* Start Time: 2021-09-27T19:34:41.676+0000


* Duration: 8 min 48 sec


* Commit: f96aea8e57d70201b75327ce2e005bbb1bfba88a



#### Test stats :test_tube:

| Test         | Results                         |
| ------------ | :-----------------------------: |
| Failed       | 1  |
| Passed       | 130  |
| Skipped      | 0 |
| Total        | 131   |


</p>
</details>

<!-- TEST RESULTS IF ANY-->

  ### Test errors [![1](https://img.shields.io/badge/1%20-red)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//tests)
<details><summary>Expand to view the tests failures</summary><p>
    
    
##### `Test / CLI screenshots with device emulation – CLI screenshots with device emulation`


<ul>
<li>no error details</li>
<details><summary>Expand to view the stacktrace</summary><p>

```
 Error: Failed: "Error SyntaxError: Unexpected end of JSON input could not parse data '{\"type\":\"screenshot/block\",\"_id\":\"71bb77ed1acf85f13f1e8a2ab3cf3401850f7b9d\",\"@timestamp\":1632771724884045.2,\"root_fields\":{\"os\":{\"platform\":\"linux\"},\"package\":{\"name\":\"@elastic/synthetics\",\"version\":\"1.0.0-beta.14\"}},\"blob\":\"/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAFyALQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAj/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'"
    at Env.it (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:95:24)
    at it (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:100:21)
    at Suite.<anonymous> (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/__tests__/cli.test.ts:163:3)
    at addSpecsToSuite (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-jasmine2/build/jasmine/Env.js:444:51)
    at Env.describe (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-jasmine2/build/jasmine/Env.js:414:11)
    at describe (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:88:18)
    at Object.<anonymous> (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/__tests__/cli.test.ts:30:1)
    at Runtime._execModule (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-runtime/build/index.js:1299:24)
    at Runtime._loadModule (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-runtime/build/index.js:898:12)
    at Runtime.requireModule (/var/lib/jenkins/workspace/nt-rum_elastic-synthetics_PR-385/src/github.com/elastic/synthetics/node_modules/jest-runtime/build/index.js:746:10) 
 ```
</p></details>
</ul>
    
</p></details>


<!-- STEPS ERRORS IF ANY -->











### Steps errors [![1](https://img.shields.io/badge/1%20-red)](https://apm-ci.elastic.co/blue/organizations/jenkins/apm-agent-rum%2Felastic-synthetics%2FPR-385/detail/PR-385/1//pipeline)
  <details><summary>Expand to view the steps failures</summary>
  <p>


  
  
  
  
##### `Runs the tests`
<ul>
<li>Took 1 min 58 sec . View more details <a href="https://apm-ci.elastic.co//blue/rest/organizations/jenkins/pipelines/apm-agent-rum/pipelines/elastic-synthetics/pipelines/PR-385/runs/1/steps/300/log/?start=0">here</a></li>
<li>Description: <code>./node_modules/.bin/jest --ci --reporters=default --reporters=jest-junit</code></l1>
</ul>
  
  </p>
  </details>


## :robot: GitHub comments

To re-run your PR in the CI, just comment with:


- `/test` : Re-trigger the build.




<!--COMMENT_GENERATED_WITH_ID_comment.id-->
vigneshshanmugam: /test

Patch:
diff --git a/src/formatter/javascript.ts b/src/formatter/javascript.ts
index bc66921..76b6b80 100644
--- a/src/formatter/javascript.ts
+++ b/src/formatter/javascript.ts
@@ -264,11 +264,16 @@ function toAssertCall(pageAlias, action) {
   const { command, selector, value } = action;
   switch (command) {
     case 'textContent':
+    case 'innerText':
       return `expect(await ${pageAlias}.${command}(${quote(
         selector
-      )})).toBe(${quote(value)});`;
+      )})).toMatch(${quote(value)});`;
     case 'isVisible':
     case 'isHidden':
+    case 'isChecked':
+    case 'isEditable':
+    case 'isEnabled':
+    case 'isDisabled':
       return `expect(await ${pageAlias}.${command}(${quote(
         selector
       )})).toBeTruthy();`;


Test patch:
diff --git a/__tests__/formatter/__snapshots__/javascript.test.ts.snap b/__tests__/formatter/__snapshots__/javascript.test.ts.snap
index 252391e..cd9bfc1 100644
--- a/__tests__/formatter/__snapshots__/javascript.test.ts.snap
+++ b/__tests__/formatter/__snapshots__/javascript.test.ts.snap
@@ -3,8 +3,9 @@
 exports[`Synthetics JavaScript formatter inline journeys 1`] = `
 "step('Go to https://vigneshh.in/', async () => {
   await page.goto('https://vigneshh.in/');
-  await page.click('a:has-text(\\"Go to bag\\")');
-  expect(await page.textContent('text=Babel Minify')).toBe('babel');
+  expect(await page.isVisible('text=Babel Minify')).toBeTruthy();
+  expect(await page.isEditable('text=Babel Minify')).toBeTruthy();
+  expect(await page.textContent('text=Babel Minify')).toMatch('Babel');
 });
 step('Click text=Babel Minify', async () => {
   const [page1] = await Promise.all([
@@ -25,8 +26,9 @@ exports[`Synthetics JavaScript formatter suite journeys 1`] = `
 journey('Recorded journey', async ({ page, context }) => {
   step('Go to https://vigneshh.in/', async () => {
     await page.goto('https://vigneshh.in/');
-    await page.click('a:has-text(\\"Go to bag\\")');
-    expect(await page.textContent('text=Babel Minify')).toBe('babel');
+    expect(await page.isVisible('text=Babel Minify')).toBeTruthy();
+    expect(await page.isEditable('text=Babel Minify')).toBeTruthy();
+    expect(await page.textContent('text=Babel Minify')).toMatch('Babel');
   });
   step('Click text=Babel Minify', async () => {
     const [page1] = await Promise.all([
diff --git a/__tests__/formatter/javascript.test.ts b/__tests__/formatter/javascript.test.ts
index 42eee54..d8c1184 100644
--- a/__tests__/formatter/javascript.test.ts
+++ b/__tests__/formatter/javascript.test.ts
@@ -55,14 +55,24 @@ const recorderActions: Array<ActionInContext> = [
     isMainFrame: true,
     frameUrl: 'https://vigneshh.in/',
     action: {
-      name: 'click',
-      selector: 'a:has-text("Go to bag")',
+      name: 'assert',
+      isAssert: true,
+      command: 'isVisible',
+      selector: 'text=Babel Minify',
+      signals: [],
+    },
+  },
+  {
+    pageAlias: 'page',
+    isMainFrame: true,
+    frameUrl: 'https://vigneshh.in/',
+    action: {
+      name: 'assert',
+      isAssert: true,
+      command: 'isEditable',
+      selector: 'text=Babel Minify',
       signals: [],
-      button: 'left',
-      modifiers: 0,
-      clickCount: 1,
     },
-    committed: true,
   },
   {
     pageAlias: 'page',
@@ -73,7 +83,7 @@ const recorderActions: Array<ActionInContext> = [
       isAssert: true,
       command: 'textContent',
       selector: 'text=Babel Minify',
-      value: 'babel',
+      value: 'Babel',
       signals: [],
     },
   },