Just because a site says we can't paste into a field, doesn't mean we have to believe it.
Inspired by this blog post:
dev.to/claireparker/how-to-prevent-pasting-into-input-fields-nn
Clair Parker-Jones shows how to prevent people pasting into input fields. This is common code and you'll see it on StackOverflow a lot. Claire's post seemed to receive a lot of flack comments but, people do this and she just wanted to learn how it was done and shared that knowledge. She also put the time into creating a codepen example which you can explore and experiment with.
I forked the example code in here:
https://codepen.io/eviltester/pen/WPpJGo
This is terrible UX pattern but we see it all the time. And as testers we have to work with it, or workaround it.
How to bypass no paste code?
So how do we bypass it?
- inspect and remove listener in the dev tools
- with code from the console:
document.getElementById("paste-no").onpaste={};
document.getElementById("paste-no").onpaste=null;
document.getElementById("paste-no").onpaste=new function(){};
If it wasn't in a frame it would be easy to create a bookmarklet. Creating a bookmarklet can be done, but it is a little bit more complicated than if it wasn't in a frame. For information on bookmarklets and frames see https://www.irt.org/articles/js170/
Everything in the GUI is ours to observe, interrogate and manipulate. Which is why as testers, the more we understand the technology and the tools, the more we open up possibilities and options in our testing. And we should not limit our testing to the obvious 'happy' paths in the GUI.
If you are interested in learning this type of thing then I have an online course:
https://eviltester.com/techwebtest101
I have a follow on exclusive video for Patreons which shows showing another way to bypass the pasting (amending the WebElement value attribute) and discussing this in more detail in relation to Software Testing, Risk and Bug & UX Advocacy.
https://www.patreon.com/posts/24482175