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");
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 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.
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...
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.