Testing browser devtools extension with puppeteer - google-chrome-devtools

I'm currently looking for a way to run automated tests on my devtools browser extension.
The extension basically injects/run some code in the current page, and displays the results.
I found that I can access the devtools panel code using this url: devtools://devtools/bundled/js_app.html?ws=127.0.0.1:9222/devtools/page/2786924A6A07EBBC4FE18A07D9D37BD4
But, with this url, the extension doesn't have any attached context (devtools.inspectedWindow) and doesn't know where to inject the testing code.
Is there another way I can use to access both the page and the devtools panel at the same time?
Thanks

Related

Unable to perform the action on android webview

I am using Robot Framework with python. I have a page that has a web view. I am able to find the element through Appium inspector and also through the Chrome Dev tools. But those locators are not working. The test case passes but it does not click on that element.
Is there any work around for this issue?
Did you try the class name locator?
driver.find_element_by_class_name()

Inspect App State/Local State in Flutter DevTools

I'm using the VSCode Debugger (breakpoints) to peek into my states. I know there's a Flutter Devtools to Inspect the widget tree but I was not able to inspect data from it. Is there any better way of doing this like React/Redux Devtools? I'm using Scoped Models by the way.
I ended up using the provider package which is devtools friendly

How to pull up Chrome Console in Visual Studio Code

I have 2 questions about the same thing please ;)
I am developing an extension for Code and I need to see the Chrime console. Therefore:
How can I pull up Chrome Console to see the Console messages coming from my extension
How can I pull up a Chrome Console for the HTML content that I and displaying in my extension via DocumentProvider?
The question 2 is there as I happened to visualize the Console after some exception but I could not access the HTML and JS content of the extension generated page.
See Help -> Toggle Developer Tools.

chrome cache removal for single files

recently I had to remove my entire cache to be able to view a webpage I was working on. This is fine I guess but it could be improved by removing specific pages from the cache.
the chrome.browsingData.remove, seemingly has no option for indicating individual pages for removal. I was wondering if this could be done externally, but I am not familiar with the chromium code. I was also wondering if there are any planned changes to the chrome.browsingData.remove implementation.
Many thanks
To remove a single file cache enter its URL into browser and do hard refresh.
If you are working on a webpage and wish to avoid caching (btw, it's recommended! :) You can do it today in Chrome DevTools.
Go to Settings (the icon in the bottom-right corner) and click on it.
Then, you will have an option 'disable cache' - mark it and you done.
Just don't forget to return this state when you done working as chrome will be faster with its caching schema.
Edit 10/Feb/2022: Access the remote dev tools documentation for a whole suit of tools available to override cached files while developing:
https://developer.chrome.com/docs/devtools/storage/cache/
If you are attempting to clear HTTP cached data, which was the original question in the post, then the network log is where it is possible. the guide for that is here:
https://developer.chrome.com/docs/devtools/network/#load
First find the file then release its cacged content by right clicking:
https://developer.chrome.com/docs/devtools/network/reference/#clear-cache
To remove all files (not single files) while in Chrome DevTools you should click on the Dev Tools settings then choose
"Disable cache (while DevTools is open)". This was the first option on the page - it is now (as of Chrome 103 in 2022) under network in Preferences.
Note that these settings are not the main Chrome settings, but are specific to Dev Tools.
You can reach DevTools by pressing F12 while on a web page you want to debug or by pressing Ctrl-Shift-I.
Edited 28 July 2022
If you're building the page dynamically, then during development, you can put a random string at the end of the URL used to load the script.
<script src="path/to/script.js?_=<%=Math.random()%>"></script>
This will cause a cache miss for that file but will use the cache for everything else (subject to cache-control headers and so on). Just remember to remove the parameter before pushing to prod!
UPDATE : 2019, April 20
Lately, I'm working with Chrome browser's inbuilt feature - Overrides. With this feature, we can write code for HTML, CSS, JS, etc directly in the console and see it on the web-page.
Here's a tutorial that might be helpful
Previous Answer :
I'm working with Google Chrome extension Resource Override.
After installing this extension, I'm overriding the resource which I want from the server instead of cache:
STEP #2 : Override the resource which you want fresh from the server:
⭐Important Note - Access the plugin from the developer-console instead of the browser
⭐⭐ I started with this approach but have moved to approach suggested by Lukas Greblikas in the answer above.
Good Luck...

Does selenium support IE with google frame add on installed on it?

Selenium is able to load Chrome Frame pages. The problem is that once you load the page in IE with Chrome Frame plugin, the tag appears as empty. Selenium tries to identify elements using the DOM structure, but the way IE and Chrome Frame plugin works, rendering
and DOM tree are taken over by the Chromium code and IE gets an empty DOM.
So i guess, selenium doesn't support IE with google frame add-on installed on it?
Has anyone worked around this problem?
Thanks
This question has been asked and answered on the Selenium user's mailing list. The IE driver doesn't work with the Google Chrome Frame add-on, and there are no plans to implement support for it to work with the Chrome Frame add-on. Either you want to test the operation of your website under Chrome (in which case you should use the ChromeDriver), or you want to test it under IE (in which case you should use the IE driver). If you can point to a specific case where using the website with the Chrome Frame add-on behaves differently than the way it behaves with the Chrome standalone browser, you might be able to make a case to revisit the issue. Furthermore, remember that Selenium is an Open Source project, and you are welcome to make changes and submit patches to the code at any time.
Watir WebDriver has the same issue.
Selenium core, the part that loads in the target browser and executes tests does work and can be run independently. So, if you have a Selenium test suite in HTML form, it can be run in GCF using the following steps:
Configure a web server to opt all URLs into chrome frame using HTTP header as described here: http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Making-Your-Pages-Work-With-Google-
Host your test suite under '/tests' folder on this web server. Lets say the suite is my_test_suite.html.
Host the selenium core folder as the '/core' on the server
Now restart the server.
Run the suite with this URL: http:///core/TestRunner.html?test=tests/my_test_suite.html&auto=true