BrowerStack Puppeteer JSON performance issues

[hychan48]

Questions and Answer

• Is this consistent or intermittent?

• Consistent

• A few additional BrowserStack Session IDs where you encountered this issue

• a51e96f417ebc64e9fa2248536ca69d796acbd61
• f22787ba84e8d35548b0cfeec3e8eee70414908f

• If Intermittent, then please share the Most recent BrowserStack Session ID where your test was executed quickly without any issues

• n/a

• The framework used for scripting

• Puppeteer and Puppeteer Replay
• If i use pure Puppeteer without Replay / JSON. it is fine

• Is this error encountered for a specific Browser/OS/browser version combination?

• Both Windows and Mac OS on Chrome, looking at the public tests. any of them that are over 3 minutes. I used JSON

• As you have mentioned this is getting executed very quickly when tested on local browser, could you please share a local execution video/logs with us?

• I can share two. first is browser Puppeteer with json. Second is NodeJS Puppeteer with the json
• Note, it took about 10 seconds max for both. while the fastest I've gotten was 36 seconds.
• If i use Puppeteer with the JSON / replay. it takes about 3 minutes

material_theme_design_json_2023-06-21.23-57-51.mp4

pupp_replay_run_2023-06-22.00-42-51.mp4

Links

BrowerStack Public Tests

Appendix

Puppeteer JSON

import-colors.json

{
  "title": "import-colors",
  "steps": [
    {
      "type": "navigate",
      "url": "https://m3.material.io/theme-builder#/custom",
      "assertedEvents": [
        {
          "type": "navigation",
          "url": "https://m3.material.io/theme-builder#/custom",
          "title": "Material Design"
        }
      ]
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "change",
      "target": "main",
      "value": "#cba642",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ]
    },
    {
      "type": "keyDown",
      "key": "Enter"
    },
    {
      "type": "keyUp",
      "key": "Enter"
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(1) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "change",
      "target": "main",
      "value": "#8b90a5",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ]
    },
    {
      "type": "keyDown",
      "key": "Enter"
    },
    {
      "type": "keyUp",
      "key": "Enter"
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(2) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "change",
      "target": "main",
      "value": "#7a93b0",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ]
    },
    {
      "type": "keyDown",
      "key": "Enter"
    },
    {
      "type": "keyUp",
      "key": "Enter"
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(3) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #source-color"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "change",
      "target": "main",
      "value": "#837e76",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #source-hex"
        ]
      ]
    },
    {
      "type": "keyDown",
      "key": "Enter"
    },
    {
      "type": "keyUp",
      "key": "Enter"
    },
    {
      "type": "waitForElement",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "timeout": 5000,
      "visible": true
    },
    {
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "body > mio-root > mio-theme-builder > theme-builder ",
          " main > root-page > custom-base ",
          " main > section.options > article > div:nth-child(2) > core-colors ",
          " section > div.colors > div:nth-child(4) > core-color-input ",
          " #root > color-input ",
          " #modal-dialog > div.actions > button"
        ]
      ],
      "offsetY": 10,
      "offsetX": 10,
      "duration": 300,
      "timeout": 5000
    }
  ]
}