Get xpath element in flexbox - javascript

If I click the chrome extension it open a window (flex) I can inspect it but I can't interact with it.
If I try its xpath and assert it , it always fails. I think I need to switch to it first then assert it. Like we for iframes.
Xpath I tried was "//button[text()='Merge']". Click on the image to see clearly.
How can I verify it? If not selenium can I assert it in JavaScript maybe? I don't know how do it in JS

Related

Click using Javascript in Chrome

I am trying to click on page two using JS
https://www.abbreviations.com/sr
So I opened the console and put
document.getElementsByClassName('rc5')[1].click();
But it didn't click it and go to that page
This worked for me:
document.querySelectorAll(".pager > .rc5")[1].click()
what kind action you want to get as your 'click' result? first, it may be important to determine, that browser defines clicks as 'native' and 'generated by the code' and in the case of security and browsers policies.
but there is one smart method to work with DOM - headless browsers, like puppeteer.
you can do really anything with the webpage, using pure javascript.

Create element in Selenium

I am using the Selenium plugin to test my javascript code. Part of my code is that, onclick anywhere on the document body, a div is created and placed there. It works fine when I click myself, but after the click action on a selenium test case, nothing is created and I'm left with an error. Is this some missing feature of selenium, or am I doing something wrong?
Here is a screenshot:

In a web browser, how to find out what triggers a hidden CSS class to appear in javascript?

As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.

Open firebug inscpector using javascript

From a bookmarklet I need to open firebug and inspecting an element.
I know firebug got a command "inspect" but it seems it's not possible to execute this command from javascript.
Firebug can be driven using the new firefox command line ...but it seems we can not execute command line from javascript.
If you have an idea?
I have a bookmarklet which finds errors in the HTML code. The bookmarklet lists all elements in error. If user clicks on an element, I would like to display it in firebug inspector.
Not sure what exactly you are trying to achieve here. If you are trying to debug your own code then use javascript "debugger" command to cause firebug to break on a given line of code.
If you are looking to trigger Firebug to open at an end user's browser then this would cause confusion for the user and also this option could possibly be a security risk.
Anyway if firebug is deactivated then it can't respond to anything so you wouldn't be able to do this.
You can open FireBug just by pressing F12 in the browser

How to find elements that are out of page

I'm trying to repair a slideout javascript menu. The problem is, that the 3rd level sub-menu doesn't show although it should. I am sure it has something to do with wrong positioning and the element is showing somewhere outside the page.
Now my question is: is there a browser extension, or some other way to outline an element that is beyond borders of the page?
Thanks!
EDIT: Okay that's weird.. according to the coords it seems to be in the correct position, it also has proper dimensions, is visible and yet I can't see it.. am I missing something?
Yes, use firebug (in Firefox) or Chrome Developer console (CTRL+SHIFT+C) (in Chrome), locate your menu on html tab and checkout the computed styles for that element to see where is it. You can also type any styles you like and see how it affects your menu.
For Firefox, Firebug allows you to inspect the DOM; You can use the HTML tab to find your missing element. When you click on the element, Firebug will highlight it and overlay guides showing you where it is. It will also give you positioning information in the Layout tab on the right, and you can reposition the element by changing its style using the Style tab.
Chrome developer tools already has this built in; Go to Settings->Tools->Developer Tools (or use the keyboard shortcut Ctrl-Shift-I) to activate it. It's very similar to Firebug.

Categories

Resources