How to inspect a Firefox WebExtension popup? - firefox-addon-webextensions

I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.
Btw the popup is just an HTML file and it is defined in browser_action.default_popup.

The bugs referenced in #minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...
enter about:debugging in the URL bar.
In the left-hand menu, click This Firefox (or This Nightly).
click Inspect next to your extension to open the "Extension Toolbox".
Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox
then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")
After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.

It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.
Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.

Related

Element is not clickable in Protractor

I am facing issue while interacting with any element in a modal popup. I am using ChromeDriver 2.46 and all tests which involves modal popup fails on Chrome 74.
I get below error
element is not clickable. Other element would receive the click
I have tried with scrollToTop, scrollToElement and visibilityOf but nothing worked. Has anyone faced similar issue?
Attach you html, and full error stack
Meanwhile here is my assumption which is 90% likely what your problem is
Lets assume your html is something like
<div>
<button></button>
</div>
your button is visible... but so is div element. BUT because wraps the button, it is above the button (has higher z-index). That's why when you click button, div gets this click, which protractor doesn't let happen. And fails
In this case just simply use js click
browser.executeScript(
"arguments[0].click();",
$element.getWebElement() // substitute $element to your elementFinder
)
this will work because element gets the click regardless of visibility and the page layout
I suspect that Driver version and chrome version incompatibility could be the reason for your problem. Since chrome driver 2.46 supports v71-73 and you are using v74. We also observed that there are many evident instances of this. I would suggest first make sure that drive and chrome browser compatibility before running any test case.
Refer this link for browser and driver compatibility

How to keep firefox web extension popup from closing when clicking on inspector window

I'm having a hard time debugging my Firefox extension (popup). Whenever I click on the debug pane, the popup closes and all the information in the debug pane is gone. This happens when trying to inspect the network requests, copy something from the console, or look at the element styles in the inspector.
I'm sure other Firefox extension devs have encountered this problem. How did you solve it?
You can disable popups closing when something outside of it is focused from the add-on debugger toolbox: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups

How access weblements in a child window in IE8 browser

I am trying to access web elements in a child window in IE8 browser.
I am not able to access any of the element in that child window, I tried Developer tools (F12) in browser, macros to get X path, page source to get ID/name for the elements but nothing is working there. Could some one help me please
What do you mean by :-
nothing is working there?
Be specific.
You can open the website in Firefox or some other advanced web-browser to get the element's selectors and later run the automated scripts using IE 8 driver.
Check the code in the answer provided for a similar question -
Java: focus is not on pop-window during window handling
EDIT: Other approaches--
Try the following steps (Manually):
Open main page, hit F12 to open developer toolbar.
Perform action that opens the popup.
Focus on popup and hit F12. You should see a developer toolbar.
Check this screenshot - http://snag.gy/pPXLX.jpg
As an alternative you may also try getting the URL of the popup and open in a new tab in the main browser window and then do F12 to inspect any elements.

ng-mouseover and ng-mouseleave events not working on chrome

I have set up the following in my angular app
I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}" ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.
However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.
Anyone know why this is the case?
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).
If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).
In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.

Problems using LightBox 2 with IE7

I'm having a problem with IE7 when clicking on images that open up using the Lightbox 2 javascript image viewer. Instead of overlaying the image on the current page it opens the image into a separate page.
Not sure if this is an AJAX problem possibly ? Works fine in Firefox.
Anybody else come across this before ?
Your page is performing the fall-back behaviour you would expect in the following scenarios...
JavaScript is disabled
There is an error in the JavaScript that is creating the lightbox effect (look out for a very brief flash of the yellow error icon before the next page loads - or fire up some dev tools)
There is a JavaScript error on the page before the image is clicked, which has stopped execution of JavaScript on the page (look out for the yellow error icon in the status bar again!)
The only thing I can think of is that I have google toolbar amd McAfee security installed that may be blocking the overlay (????) but don't think that should make any difference.

Resources