Methods to (unit) test the interface of a website - javascript

I'm wondering what are the best practices to test the "interface functionality" of a website.
I'm interested in what methods are available for testing the interface and dynamic generated contents. In particolar I struggle to figure out whether it is possible to create automated tests for actions that require user interaction, or if it is just a waste of time and I should just get some beta tester do this type of work.
I'll try to give some examples:
on SO when you type the title of your new question some "related questions" appear. Obviously you can implement some sort of test that tells you that you got the correct number of related questions, and that they get displayed, but how do you test the "correctness" of the links? Would you setup a mock set of questions (always the same) and check that the returned questions are some pre-established ones? That would work, sure, but it's hardly testing the robustness of your search algorithm. What happens when other questions are added to the pool? Are the returned results still "related"?
Clicking on a certain button a JS is called that generates a "popup div", that the user can move around. Again, how do you automatically test this kind of interface? You can test for the appearance, but how do you test for the movement?
You have an interface to upload files to the site to embed in your message (like the image icon here on SO). So the user is required to 1) press the button 2) browse for the file 3) wait for the upload 4) press OK and finally he/she will see the image in the message. Again, I can see how you can automate the test for the upload (e.g. try upload a "normal" file, then one which is too big, of an unsupported format and so on). But what about the use of the interface? If the OK or the Browse buttons don't work for whatever reason it's no use that the upload works as, at the end of the day, you still cannot upload your file and see it in your message.
Obviously all of the above are fairly straightforward to beta-test (just tell a bunch of users to test your website and they'll notice if anything goes wrong), but can you do (and more importantly would you spend time implementing) automated tests on this kind of things? Also, when beta testing, would you have testers "run wild" and do whatever they want on the site, or rather tell which functions you'd like them to test. I'd propend for the 1st but I'm open to suggestions.

What we use at our place is Selenium. It has a few quirks, but overall it has allowed us to increase test coverage enormously, with I think a few thousand new system tests clicking around. Note that one can argue if this is really "unit" testing. That depends on your stack, I guess. We have to have our system running for this, so it's more integration testing.
For pure unit testing of JS we use QUnit, and HTMLUnit has proven somewhat popular as well, for "middle of the road" tests that don't use a real browser but still gives you a DOM and whatnot.

Some of you problems may be answered by visual testing, and there is a great framework for it: http://sikuli.csail.mit.edu/
It allows you to expect visual results and programmatically control a web page.

Related

How to do Testing on JavaScript changes

In an Assignment it was asked what is the first thing to do before testing changes done in JavaScript, after deploying an application. My answer was to clean the browser cache because the cached content may affect the new changes. I want to know whether it is a valid and a good answer or are there some things to do prior to that? Thank you
A word of advice, not all users understand the principle of clearing the browser cache to obtain changes. I suggest you to increment you'r javascript file instead of taking into consideration that users will clear their cache.
But before deploying a modification, I advise you to do some tests. Several types of test exist, you can look for example at unit tests.
What a vague question to be asked, however I personally think about how a real user would use the system when I test it. Therefore, would I trust the user to clear the cache / cookies etc everytime they used the system? No. I would expect to be able to either close the browser and open (or simply refresh the screen). As mentioned in another answer, 'cache busting' should be handled by the developer during the build process, for example by hashing the javascript bundle.
I used to get into a habit of opening dev tools all of the time and relying on the 'disable cache' toggle, however after a few times of getting caught out by real users seeing different behaviour that what i was seeing during development, I moved to ensure that the bundles weren't cached in both dev and prod.

How to use javascript to run automated tests in browser using selenium+CUCUMBER

Well, I am kinda new to this. First of all, my main goal is to execute a simple cucumber example which tests automatically something extremely simple as well.By doing this I will try to get the idea of how should i do other kind of autmated test.
So, I wrote some scenarios, and I want to test them somehow on a site(e.g. google.com). The site is written in JS and therefore I need to write JavaScript code to "connect" the scenarios with the language.
I google searched things like: "How to automatically test a site using cucumber" "How to automatically run scenarios with selenium-javascript" and so on...
Any ideas?
No hatefull comments please :/
Thanks in advance!
DL.
I wrote some scenarios,
When you say that I believe you are able to execute your testcases with cucumber
The site is written in JS and therefore I need to write JavaScript
code to "connect" the scenarios with the language.
thats not necessary, if you are site is based on javascript like AngularJS you can still use simple java + selenium but protractor is recommended for same as it have wrapper. protractor is a nodejs based project to deal with sites based on AngularJS.
https://www.protractortest.org/#/
How to automatically test a site using cucumber
You can use a CI/CD tool like jenkins which you can trigger manually or you can put an scheduler who will run all your test script against your website on it. You can also turn on the notification so when ever the test complete it will shoot an email to respective individuals
Refer:
https://jenkins.io/
You can get n number of tutorial regarding same. example:
Click Here
I would spend some time at http://cucumber.io and work through the introduction tutorial in a language you are most familiar with. I would also do more general reading starting from that site, perhaps starting from https://cucumber.io/docs/guides/
Generally you use Cucumber to test something you are building, so when you try to keep things simple and test something someone else has built (e.g. Google) you are actually making things more complicated because now you have to deal with actually getting to that site and interacting with it.
Depending on where you are starting from Cucumber has a pretty steep learning curve and many many people make bad starts. So take your time and learn from the people who wrote and support Cucumber. cucumber.io is a much better starting point for you than StackOverflow.
Good luck, and happy cuking.

web app- Would it be possible to disable Windows+Printscreen?

I am trying to prevent users from taking screenshot in my web application written in Java.From my research,it seems highly unlikely.I did found a link below:
https://stackoverflow.com/questions/3130983/stop-user-from-using-print-scrn-printscreen-key-of-the-keyboard-for-any-we
It's able to disable the printscreen button but it doesn't disable if a user tries to use windows+printscreen.Now, I know even if I do managed to disable it, there's other third party application like snipping tools,camera,etc to take a screenshot but that's way beyond my control and I'm not looking into those.
I was just wondering is there a way to disable Win+Printscreen to prevent user from screenshotting?
If anyone has done it before, I appreciate any sort of suggestion.
Simple answer: No
Have a quick think about why you need to hide this info, does it really matter if other people see it? I assume that you have proof that you came up with your conclusion/process first? The information will never remain exclusive forever, especially not on the internet.
You normally do not have access to higher level controls so it is normally not possible with a web app. Having said that, there are several possible ideas:
Send your content directly to the graphics device/card via an API so that it is never visible to the operating system screen space (Where print screen works). However, with the right tools it is still possible to catch a graphics stream but it's a little harder for the average user.
Make your webapp launch a custom desktop application with more control over the OS (Download an exe and run it?)
Design a plugin/extension for a web browser that limits the use of printScreen, and then only show content on your webapp if your site can see that the plugin/extension is installed and running. This may not work with the way that Chrome and Firefox now manage plugins, it would need more investigation.
The best answer would be to only show limited info/conclusions on your webapp, and keep all the proof of concept hidden. Then you can make people sign-up to your app if they want more information, and then give a strict set of criteria that must be met.

JAVA - how to open a browser tab from eclipse?

I've just got back into Eclipse after 2 years. I have finally forgiven it after I last used it for a mobile development class in 2015 (that was put together as well as a duct-taped carnival ride).
I have taken several for-credit coding classes before, and over the summer, I'm going to take several programming classes via Udemy.
The problem is, I've never built a worthwhile desktop app before via actual coding (because I don't think Multimedia Fusion 2 counts). Even worse, I rarely ever use Java.
So now, with blind and eager ambition, I'm looking to develop a desktop app for myself (and for others if it's of any use) that will allow users to create entries where they can enter urls and titles (merely for aesthetic purposes, no effect on the browser), and when some condition is met, the desktop application will open Chrome tabs with tabs to those exact urls.
From this, I'm hoping to understand Java better, like I understand C++. It would be really nice if I could just do it for any browser on the first try, but if I had to do each browser separately, I would like to try Chrome firstly, as it's what I use.
If all goes well, I could attempt to make the same app for Chrome as a Chrome App, but for now... :)
Here's the core idea/plan:
Declare a vector of a class called "tabs", where this class contains 2 strings: one for the title, the other for the url. Both should be editable by the user, but for simplicity's sake, we'll just make them an "enter these fields once and now don't edit them" kind of thing to start with.
When the user wants to add a url to open in Chrome, we add to (or "push back", whatever it's called) the tabs vector with whatever data the user enters.
When a user presses some key or button, then Chrome will open with those tabs.
Here are my ideas on how I could approach this:
I might be able to download some kind of official Chrome development tools into Eclipse that would allow me to manipulate the browser functions, such as opening and closing tabs. If I can pass arguments into those functions, I could iterate through my tabs vector and open them until the end. I've looked for tools like these, and though I may have come across the right one(s) already, nothing really struck me as the "I am your solution!" package deal. I almost imported an official package into Eclipse that looked super-promising, but the official link was dead. :(
I might be able to use Javascript somehow, because if I understand correctly, I could create a Window object, iterate through the tabs vector, and just call the window.open() function and pass in the url at [i] to the function. But then, would this work for a desktop app?? I've read that NW.js can use Javascript/CSS/hmtl for desktop apps, so I think it could do this, but I've also heard it's a little buggy on Windows 10.
I'm also looking into Electron, while still on the idea of desktop JavaScript. It looks pretty reliable, actually.
But beyond all those ideas, I don't absolutely know what tools I need to use or which ones I could even feasibly use to do this. :/ The options are a little overwhelming, and I'm not sure which ones are worth looking into to do what I want, given the idea I've shared (I'll worry about the rest of the program when the time comes). This really doesn't seem like a hard project, and I really want to get my feet wet into app development, but sometimes I feel a little lost on where to go.
I don't really know what exactly to ask, besides: "Even if it means downloading something else entirely, what IDE/dev kit/whatever could get me started in the right direction and do this task?
Hope this isn't too vague a question, cheers,
-Jon
There are 2 simple ways to do this..
The first: In the file menu, navigate as follows... Window -> Show View -> other -> General -> Internal Web Browser
The second: Right click your project in Project Explorer -> Run As -> Run on Server (assuming you have your server properly set up, etc...)

CSS cross-browser test with screenshots

Currently I'm working with unit tests for JS project. The only thing i can do automated test for is functionality.
Question: is there any way to automate appearance testing? I mean that currently i wont know that some styles, that work perfectly in Chrome, are off in IE unless i will open IE browser and take a look at my page.
I was thinking about taking screenshots of the page during all DOM events with the same window size/resolution. Them compare those images and if there are any significant differences then spit it out as a failed test ("bug found" sorta thing).
Is there anything like that out there? I don't really want to re-invent the wheel.
I'm NOT asking "how can i take a screenshot of the web-site" I'm asking "how i can analyze already taken screenshot"
i dont know about automation .. but you can use a cross browser service to test your website in like:
http://www.browserstack.com/
also there is also Browsershots:
http://browsershots.org/
but the best way to test is to just open the website in the different browsers and view it to get the most accurate rendering of functionality and display issues based on different browser versions
UPDATE
automated thumbnail screenshot service:
http://www.shrinktheweb.com
for IE there is
http://www.iescreenshot.com/
unless you do something on your server that captures screenshots of the different resolution
and or what #michaelt suggest below
Other UPDATE
I see your example below.. there is also this
http://www.imagemagick.org/Usage/compare/
this type of image library just show difference in pixel data .. to make it automated you would have to mix js, ajax to talk to the server and capture and compare the images.. but it would require it to compare the number of colors in the image, and if those colors are the same in each image in conjunction with the luminosity.. and then having it run on a cron job on the server ...
another way of comparing pixel data in this stackoverflow question:
How does comparing images through md5 work?
i hope it helps
I'd recommend trying out Selenium WebDriver. The WebDriver interface is really rich with functionality, taking screenshots for example, and there are so called drivers for a large number of different browsers including Internet Explorer. There are a few JavaScript implementations of WebDriver, and I've used wd and WebdriverJs with different amounts of success.
If you choose to go with a JavaScript implementation, you can relatively easily start using WebDriver as part of any unit test written in Mocha or what not.
Edit:
It seems as if I've misunderstood your question. If you want to compare screenshots, you could use an image recognition tool such as Sikuli. I've only used it's Java API, but it's available for Python as well. Sikuli can easily be part of any test written in for example TestNG or JUnit. Give it an image, and it will search a given region (or the whole screen) for images that looks like it. If it finds a part of the screen that looks like the image, it will return it to you along with the level of how certain it is that they're the same.
For your use case, you could have a images on some file server representing how parts of your page should look, and have the test make sure that they all exist. If Sikuli can't find them, or finds them but with a very low degree of certainty, you'll fail the test.

Categories