checkly / headless-recorder

Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
https://checklyhq.com/headless-recorder
MIT License
15.03k stars 722 forks source link

Can only record once after installation, not again #4

Closed tnolet closed 6 years ago

tnolet commented 6 years ago

Some report that they can only record one script after installation of the extension and not anymore. I can not reproduce (tried on a fresh Chrome installation + extension installation). Anyone suffering from this, please set logging in the console to "verbose" and report in this issue.

image

aslushnikov commented 6 years ago

My repro steps:

  1. Navigate page to https://pptr.dev
  2. Click the "record" button in extension
  3. Click on the "search" field on the website
  4. Type "eval"
  5. Mouse-click on the "page.evaluate" suggestion (should be the first in list)
  6. Hit "stop recording" in extension. Note: before stopping, I can see that extension successfully traced the input events.

After the last step, extension provides me with a pptr snippet:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.click('input')

  await browser.close()
})()

There are no errors in the console; here's what I get:

image

tnolet commented 6 years ago

@aslushnikov really weird. I have no issues recording multiple sessions on pptr.dev I will try some more to reproduce this and add some extra debug statements.

tnolet commented 6 years ago

The best way to triage this would be to write a test. I have the installation of the extension working in a test, I'm just looking for pointers on how to activate it. Any tips from your side @aslushnikov on how to get that working? Some custom CDP calls I can do?

aslushnikov commented 6 years ago

@tnolet I wonder if it has something to do with the corporate nature of our machines. I'll try it on my personal one tomorrow.

aslushnikov commented 6 years ago

I'm just looking for pointers on how to activate it. Any tips from your side @aslushnikov on how to get that working? Some custom CDP calls I can do?

@tnolet you can connect to background page since recently: Working with Chrome Extensions. Is this enough?

tnolet commented 6 years ago

@aslushnikov O jeez, totally missed that! That should work, or I think I can make it work. You guys are going to fast with Puppeteer 😮

tnolet commented 6 years ago

@aslushnikov I refactored the content script injection and cleanup routines a bit. There was some stinky logic regarding adding and removing event handlers. I think I solved it quite simply now. See https://github.com/checkly/puppeteer-recorder/commit/5ff27cbf9a868e79ae23d4e4d51c1c0c24333d7f I hope in the new update (probably ship tomorrow) you will no longer have the reported issues.

aslushnikov commented 6 years ago

See 5ff27cb I hope in the new update (probably ship tomorrow) you will no longer have the reported issues.

@tnolet I'd love to try it out!

P.S. My home computer didn't launch, so I failed to see if these are related to our corp policy.

tnolet commented 6 years ago

@aslushnikov could you try version 02.1. It's the current one on the Web Store. Although I couldn't 100% reproduce, it is smarter about restarting recordings.

vino24 commented 6 years ago

same problem, hope for resloved in nexe version

tnolet commented 6 years ago

(@aslushnikov provided this video https://www.youtube.com/watch?v=9bzDU56iyJQ&feature=youtu.be outside of this thread ) I'm not seeing the "can only record after installation" bug in this video. I can see one session being recorded and then the video stops. I can see two different issues though:

  1. The input "evaluate" is not recorded. This is solved by hitting TAB after typing. Only in TAB is the actual sentence recorded. That's a bit confusing and I will think about a better solution for this.

  2. The JSHandle link is not recorded. That is totally an issue. It is because the link is not instrumented with a listener. So nothing is recorded. See the image below.

image

This is pretty specific for how pptr.dev loads and how the content-script.js is inserted. I will look into it. FYI: A correctly instrumented link has a data-pptr-rec attribute as seen below. image

aslushnikov commented 6 years ago

I'm not seeing the "can only record after installation" bug in this video.

@tnolet Interestingly, i think this no longer happens with 0.3.0!

The input "evaluate" is not recorded. This is solved by hitting TAB after typing. Only in TAB is the actual sentence recorded. That's a bit confusing and I will think about a better solution for this.

This unfortunately didn't work for me - here's another video, this time with google search. I hit "tab" when going from search box to "submit" button: https://www.youtube.com/watch?v=gSf7s0NwFdg&feature=youtu.be

tnolet commented 6 years ago

@aslushnikov Ok, I will close this issue and port over the other issues. Thanks for helping out!