I'm writing an automated test for a Web-based application that's coded in JavaScript and uses the Dojo framework. I can find the elements I want the bot to find in Developer Tools using well-defined XPATHS, but the automated test fails to find the text the XPATH leads to.
My test code looks something like this:
if verified:
verify_detail.set_pass()
else:
raise AssertionError("Cannot verify detail. Text did not match expected value.")
And the text I'm looking for on the UI isn't misspelled in the config file.
Anyone else have this problem? XPATH works in Developer Tools but fails when the test is run.
Edit 1:
I think I've found a clue as to what's causing this problem. The bot has to navigate to a panel called the details panel. The details panel, when opened, sits on top of another panel called the movie panel. Imagine a list of movie titles and the details panel is opened by right clicking the movie and selecting 'Details' from a dropdown.
So I've basically got a stack of panels, and my XPATH queries are hitting the pane beneath the details pane, which is where I really need to to look.
Has anyone else ever had this problem?
There is not much information to go on, but I realise that it is very hard to deliver a complete example for such cases.
The most common reason for this kind of behaviour is that the element in question is not present immediately on the page, but rather some JavaScript processing has to happen before it will appear.
The most common solution is using "implicit waits", see for example:
https://selenium-python.readthedocs.io/waits.html#implicit-waits
Be aware that this might affect performance of tests in other places, specifically when checking for absence of elements, if it is switched on constantly.
The obvious alternative is explicit waiting.
Another useful tool for analysing situations like this, is to set debugger breakpoints in the browser on DOM elements that you are interesting in, to see how the element is changing while the page is loading.
Related
I was looking at popular LinkedIn post feature, the three dots seems to trigger html injection inside specific tags. My first question would be, why they did this choice, however what really interest me, is how can I debug and understand the mechanics involved, since when I inspect the page with firefox I cannot find the starting point nor the triggers to control this pop-up trigger?
I'm trying to insert a text programmaticaly to a div of some websites but then the whole UI gets broken and the changes are rejected. It seems that any changes made programmaticaly are being tracked by MutationObserver. Yet it seems to be a common problem, as Grammarly developers seem to have had it:
Another—perhaps even bigger—issue with this approach is that websites don’t like it when somebody tries to change their DOM. The code running on the site expects that the DOM it created will not be changed by any other code. If that assumption is broken, bad things can happen. So both website and text editor developers started to look for ways to disable Grammarly, including such popular editors as ProseMirror, Quill.js, Draft.js, and many others.
Source
But still there is a way out of this, as it seems:
If we were going to make any change to the DOM at all, we needed to make sure it wouldn’t be noticed by the code running on the page.
Source
How is it possible that you could change the DOM without the code's notice?
EDIT:
An example would be Facebook. If you try to insert a text into the "Create Post" dialog, it crashes and closes.
I'm trying the following in chrome's console as "Create Post" is already shown:
editor = document.querySelectorAll(`[role="textbox"]`)[0];
editor.focus();
document.execCommand("insertText", false, "some text");
This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?
I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.
This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.
I have some rather lengthy HTML and related styles and javascript. I am trying to find something within them that changes the text of a specific element. It changes this...
<span class="panel-title"> I'm a Panel with All Options</span>
... to this ...
<span class="panel-title">Best Panel Ever</span>
It seems crazy, but I tried searching every single file (1704 of them) for the text "Best Panel" and Visual Studio found nothing.
So... I am hoping that a debugger in Chrome or IE can point me to script is changing this text but I'm not familiar enough with those debugging tools to perform a task like this... or if it's even possible.
Edit for Clarification
Just to be clear... this is straight HTML, CSS, and Javascript. There is nothing like ASP or PHP involved. The HTML file in question has the first text, but the rendered HTML file has the second text.
You can using the Elements tab in Chrome find a specific item in the code (CTRL + F). This screenshot might help: http://gyazo.com/72f2f8a819bf5bfad17a210a53427f2d - It may or may not help.
Edit 1
Are you sure you looked through every single file? Maybe that Best Panel Ever is coming from a database entry which has been attacked or it may just be an attack not through a database. Have you considered that to be an option?
Edit 2
As suggested in the chat you should probably search for occurences where the span is being changed rather than looking for a specific value as it may be stored in a variable which isn't showing the text.
Edit 3
After finding out it was something to do with LS (local storage):
I think it should be broke down in to steps, first ensure that the value in question is in LS that way you can narrow down your search to localStorage.getItem("yourKeyWhichHoldTheText") and you'd have a rough idea what you are actually looking for.
The latest versions of FireFox have a javascript event inspector. Perhaps you could inspect that element for any possible js functions that could be updating it?
Here's a resource
and another
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...