I have the following element:
And then I use jquery fadeOut(), then remove() method to remove the yellow element.
This works perfectly in every browser except in android Chrome, which looks like the picture above.
The element is supposed to be removed, yet still, it exists on the screen unless I change the phone orientation.
I used chrome inspector, through Remote debugging, to check the element, and indeed the element is removed as revealed in the element panel. I just wonder why the element still shows on the screen.
The element with class LMnwtItem clearly is left with one, with display being none, yet on the screen, still showing the element.
Any help is much appreciated.
btw, sorry for being unable to show the codes.
ONE MORE INFORMATION WHICH MAY HELP
The element, however, will disappear after hiding the parent element and then showing the parent element again, but only manually.
Related
I'm clicking on a link that opens a new window with a PDF document. I switch to the new Window, which I verified that I was on by getting the URL. The window has a toolbar at the top which is visible for a few seconds when the window opens, and then hides itself unless you move the mouse again. I'm trying to click on the Download button, but anything I try gives an error that the CSS Selector can't find the element. I'm suspecting it's because of the nature of the animated toolbar, but I'm not sure. At first I was just trying a regular click:
element(by.id('download').click;
And that was not working. So I tried navigating the mouse to click on it:
browser.driver.actions().mouseMove(element(by.id('download'))).perform();
element(by.id('download')).click();
I've also tried selecting by css:
element(by.css('#download').click();
All give me -Failed: No element found using locator.
Could someone please tell me if what I'm doing is possible, and if so, how I might be able to accomplish it?
screencapture
Element
This is more of a workaround than a solution, but what works for me with elements that are for some reason not visible (covered with other elements or working only on hover) is to just inject a script. Like:
browser.executeScript(
"document.querySelector('[id=\"download\"]').click()"
);
I'm looking for a chrome feature similar to debugger/breakpoint that lets me pause a script.
Why. I like to test some css in chrome-inspector. Since it's a loading spinner it will only be visible for some milliseconds. That time is to short to play with css ;)
Why not breakpoint...
Because chrome covers the entire page with a black layer so I cannot right-click and inspect a DOM-element as I like.
So is it possible to get rid of the black layer chrome has in debegger mode? or can I simply pause a script, play around with the css and the play it again.
Thanx in advance.
In your Javascript, you can simply write:
console.log(element);
debugger;
When the Chrome developer tools console is open, this line will pause your script without placing a breakpoint manually. console.log(element); will let you access the element you wish to debug or modify via the console.
After the script stops, you can use the DOM explorer, select your element, and in the DOM properties window, under "Styles", change its display property to none to make it disappear.
I found an ok answer to my own question. Simply use the select-element tool in chrome rather than right click.
Icon to the left
It temporary removes the black-layer until the element is selected. But if you want to see the correct colors without the black layer covering it you need to display:none it in the inspector. Also if you want to work on hovers or other similar stats the black layer will prevent hovers and such.
I'm having some strange issues in Safari on Mac desktop and on iOS on a site currently being built. It seems that when there are jQuery interactions with elements, the elements disappear. When I inspect the element, I can't see any properties that indicate why the element would be hidden. If I toggle one of the checkboxes on any of the CSS properties for the element, it reappears.
Steps to Recreate
In Safari, go to: http://bisqitstage.promotw.com/
Refresh the page using the refresh button (not by hitting return on the URL).
Click the darker area (intended checkbox) to the right of "I agree to the terms and conditions of the site.".
Here is where you should see a checkmark appear based on the jQuery event.
Right click the box area and choose "Inspect Element".
In the HTML inspector, within div.bisqit-checkbox click on div.glyphicon.glyphicon-ok.check.
Scroll down within the CSS inspector and toggle the checkbox next to any of the property options (for example, uncheck and then re-check width: 35px;).
The checkmark will now be displayed
Expected
After step 3, the checkmark should be displayed after step 3. When inspecting in step 6, if you chose "width" for instance, the property was already checked. Unchecking it and checking it again shouldn't change it's state - so why does it not display after step 3?
I'm having several issues similar to this within this site build. I've tried different jQuery versions as well as removing other components that might be interfering, but cannot seem to resolve the issue.
Browser Version: Safari 7.1 (although we've noticed it back to v6).
I'm having a strange issue with IE9 where if I have multiple <div> elements on the page, where only 1 is visible at a time and then others are shown as a result of JavaScript actions on the page.
The issue I am having is that if an element is hidden (seems to only happen after being hidden for a certain amount of time), when I go to show the elements w/ jQuery $('.className').fadeIn(500); for example, the background image properties of the elements inside that DIV that is being shown are lost.
They are still there when inspecting the HTML w/ IE Developer Tools, but the background image seems to not be recognized for whatever reason. In the developer tools, I can click to edit the background image path, and simply hitting enter (not actually changing the path) makes the background appear.
Is there something with IE that makes it ignore elements if not displayed on the page for a certain amount of time? Any help would be greatly appreciated. This is very strange as this was never an issue for me in any other browser or any other version of IE.
Breakpoints are great when one knows where the code is being executed. However, I have a problem where my DIV is being manipulated by some unknown code in a library I'm using. Is there a way to basically set a breakpoint on the node and see when children are added or attributes changed?
In firebug you can set in the html tab "Stop on attribute change"
see : http://getfirebug.com/html
Just for people who have never used Firebug, go to the HTML tab along the top of the Firebug window, navigate to the element you are after by expanding the relevant nodes. (Alternatively right-click the div on the page, and choose "Inspect Element" at the bottom (usually) of the right-click menu. Mousing over the node should, by default, highlight that element on the page.
Then when you have the div node shown in the firebug window, right click on the node and choose "Break On Attribute Change", "Break on Child addition or Removal", "Break on Element Removal", or whichever combination you'd like. And voila!