I'm using Puppeteer for some testing tasks, and am a bit confused:
Does Puppeteer run the JavaScript it encounters? Specifically, our app fires of a bunch of requests (eg. loading Stripe, Facebook, etc), and I want to ensure that code is being run during a Puppeteer request.
Does Puppeteer run JavaScript on the page?
Yes, it does.
Does Puppeteer run the JavaScript it encounters?
Yes, it does.
JavaScript is enabled by default:
While Puppeteer's documentation does not explicitly say that JavaScript is enabled by default, their tutorial documentation does say that it launches Chrome in headless mode by default, and Chrome's headless mode has JavaScript enabled by default, therefore Puppeteer has JavaScript enabled by default).
You can enable or disable it with page.setJavaScriptEnabled(boolean): Promise<void>
https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pagesetjavascriptenabledenabled
You can check if it is enabled with page.isJavaScriptEnabled(): boolean
Specifically, our app fires of a bunch of requests (eg. loading Stripe, Facebook, etc), and I want to ensure that code is being run during a Puppeteer request.
Use Puppeteer's Code Coverage feature to test that your JavaScript is actually executed, including the lines and functions you want to run.
This (unrelated) blog page has an example.
Related
I am building a chrome extension that is supposed to aid in the debugging of software that runs on top of a website. This software can have a debug mode enabled that will cause a lot of output to the console using console.log.
I want to use my chrome extension to parse the console messages and show the important events in the UI for quicker debugging. However, I am not seeing a way to simply do this with the API. Is there something I am missing? Should I override the console.log function? How would I go about doing that?
There are two methods.
Override console.log, console.warn, and so on, in page context (this is important!). There are lots of examples (here's a random one). In your case it'll be even simpler as you'll just call the original method and transfer the arguments via CustomEvent to your content script (example), which will accumulate them.
Use chrome.debugger API with Console.messageAdded or Runtime.consoleAPICalled events. This will show a message bar in the entire browser about debugger being active unless you hide it globally by running chrome with --silent-debugger-extension-api command line, but that's somewhat dangerous if you accidentally install a malicious extension that uses chrome.debugger API.
I know that chrome devtool could be used as an open debugger frontend, with receiving debug info by a websocket from debugger host and displaying them such as source file and console log, it also supply a flow-control GUI for single step task as long as the host supports.
but according to the ReactNative's remote debug page:
React Native JS code runs as a web worker inside this tab.
it seems that the chrome is not only a frontend but also executes the code being debugged? so my question is:
1.how can the device-dependent code be executed in chrome?
2.will the device also execute code ? if it is, what's the relationship between it and chrome? if not, how does the app run in device?
1.how can the device-dependent code be executed in chrome?
In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc.
Source: React Native Made Easy
Note that Chrome's V8 Javascript Engine is not the only React Native can use, you could debug in Safari as well and the code would run on Safari's JavascriptCore. See this for more
2.will the device also execute code ? if it is, what's the relationship between it and chrome? if not, how does the app run in device?
No, the JS code executes only in one place, either the browser's javascript engine if you are debugging, thus communicating with the device via Websockets, or the JavascriptCore of the device if running without debugging.
Is there any way to add a time delay to a script/asset loading in the Google Chrome Browser via the Chrome Developer Tools? Or to block a script loading entirely?
The reason I want to do this is to see how a site performs when a script/asset suffers from delayed loading or failed loading.
In Chrome Developer Tools when you are in the Network you can add custom throttling. You can specify download and upload speed as well as request latency. But this will apply to all resources and not only to a specific one.
--- edit ---
For delay individual URLs on any page, you can use a chrome extension (since it can intercept browser requests). I use https://chrome.google.com/webstore/detail/url-throttler/kpkeghonflnkockcnaegmphgdldfnden
If the asset is a third party or hosted on a different domain, there is a Chrome plugin that's designed to test what you are calling loading delays, that are also called SPOF (Single Point Of Failure). It might not be very intuitive at first use, but it's very helpful :
The plugin is called SPOF-O-Matic and can be found here: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
Following solutions have nothing with Chrome Devtools but they work.
If you don't mind redirects then you can try Slowwly or deelay.me.
Other alternative for non-windows OS is Comcast.
You can do it by combining multiple resources.
I use http://www.deelay.me/ to generate the delayed url.
I then combine it with requestly extension (https://requestly.io/) to create a host replace rule to target a specific resource
This devtools extension can fit your requirement, Its a Chrome/Firefox devtools extension that can simulate http request delay for any configurable URL.
Chrome devtools extension webstore
You can use Requestly Browser Extension or Desktop App to modify your network requests. Delaying/Throttling scripts is one of the use-cases amongst many already supported in Requestly.
Here's how you can do it. Once you install Requestly, Use the Delay Request feature.
Create New Rule & Select Delay Rule Type
Define URL (or URL Pattern) and the delay value
This article explains 3 different approaches to add delay/throttle APIs (or network requests). However, in your case Requestly extension based approach should work best.
PS - I built Requestly.
I want to verify an ajax call was triggered
and also I want to detect a call to external custom protocol was triggered.
I think I will be able to read that data in this way only.
No, Selenium is not meant for such use case. Selenium WebDriver is just meant for simulating user interactions with web app. If you want intercept network requests, add custom headers etc during your selenium tests, you can use a proxy. BrowserMob proxy is popular for such use cases with selenium tests. It has a REST API too.
All of the examples I've seen show apps launching in their own windows. This may be great an all for chromebook/chrome os, but is there still an option to launch in a browser tab?
No, there is no way to do that. Chrome Packaged Apps are not supposed to run inside a browser. You can, however, open URLs in a browser tab using window.open. But you won't have control of that tab after you issue the command.
If you need some sort of integration/control between your Chrome Packaged App and the browser, you can create an extension and make a communication pipe between the extension and the app - as long as both are running, using the chrome.runtime.sendMessage API.
See this sample for a simple code that does exactly that (two apps and one extension exchanging messages directly, without any server component).
chrome.app.window.create will create a new Window for an App.
If you want window manipulation, you should switch to chrome.tabs API and look for an extension instead of an App.
Reference
chrome.tabs
chrome.app.window