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.
Related
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...)
I have a few clients that pay me to post ads on sites such as craigslist.com an backpage.com. Currently every hour or so I have a macro that runs and I manually do the captchas (which I'm fine with). But now I have some free time and I want to write a proper program to prevent stupid errors that can happen with macros (screen resize, miss clicks etc).
Part of my posting includes selecting images to upload. I know for security reasons javascript doesn't let you specify which file the user uploads, that part is decided on their own. I'm sure I could do it using NodeJS somehow since it would be local on my machine, but I don't even have the slightest idea how I would even approach this.
Any guidance or direction would be very helpful.
if you use nodeJS, you need to work hard, like
- get html content and parse it
- construct input that you want
- re-submit form, re-post data
the easier way is to use web browser automation like selenium to work end to end for you
more info: http://www.seleniumhq.org/
If you are familiar to Nodejs and JavaScript then I recommend you use Protractor.
It is the current default end-to-end automation testing tool for AngularJs applications but I'm pretty sure it will solve your problem.
Instead of using AngularJs specific selectors (like element(by.model)) to "find" your html elements you will use regular css selectors like: $("div.top") returning an array of all divs with a css class named top, for exemple.
Protractor implements Selenium Web-driver protocol, that means that the scripts that you write will communicate with almost any automation ready browser like ChromeDriver, FirefoxDriver or PhantomJsDriver (for a no GUI low fidelity but fast alternative).
Make sure you check the getting started section for a jump start.
Look, this might be a dupe question, and apologies if it is... but honestly, everything I've found on the subject seems to be from 2007, or calls out special caveats for IE6 and the like.
The setup:
Web page using math markup and MathJax to render the math in the web page (working fine).
The user(s) need to be able to export this to some sort of doc - word, PDF, etc - for distribution to proof-readers who are not permitted/desired to be "in the system" where the pages are served.
The issue:
Everything I've tried thus far to get the rendered final product out to some sort of doc - OTHER than doing a user-initiated browser-print - shows the unrendered markup and not the final product.
This is obviously due to the way the MathJax library renders the page when it's fully available, in the browser, as it's just a JS script inclusion. No surprises there.
I can get close by doing an ajax call to a page that renders, and sending that whole blob of html to a third page to write out to disc and re-serve it with mime and content disposition headers for msword, saving it to disc, etc., but the rendering is not correct - presumably due to packaging it up in a POST call. And that's a lot of steps to end up with a not-quite-right solution, anyway.
I'm guessing the answer is going to be "you can't do that", at least not without using one of the HUGE installs of TeX Live or MikTex, etc., and doing it in the back end with shell calls... but I don't have the ability to install on these hosts anyway.
Am I stuck with users doing a print-to-PDF solution? Is there something I'm missing?
Thanks, happy to flesh out where needed, but I can't be the first trying to do this.
For PDF there are a couple of options and it mostly depends on how much work you want to put in.
The quick and dirty solution might be wkhtmltopdf, but you'll have to specify a wait time for JavaScript rendering to finish -- not ideal.
PhantomJS requires slightly more work but allows you to listen in on the page, e.g., this discussion links to a simple example. (There are lots of PhantomJS-based tools out there actually.)
Another way would be to first pre-process using MathJax-node and then pass the result to wkhtmltopdf (then you don't have to wait for MathJax).
For doc/docx I don't think there is any way right now. The natural way would be to use MathJax-node to generate MathML, since Word can import MathML. But Word does not seem to support MathML when imported from HTML. The same holds for generating SVG with MathJax-node (but with SVG you would loose the ability to edit the equations so that might be prohibitive anyway).
Pandoc might eventually help. It can apparently convert mathematics to the MS Office format, see demo #30). But from a quick test this doesn't seem to work for HTML input right now.
If you are considering commercial solutions, have a look at pdfChip from callas software (warning: I'm heavily affiliated with this solution).
It does HTML to PDF and will actually convert MathML using MathJax into a proper PDF file (that can even be a PDF/X or PDF/A file if you so desire). I'll be happy to provide more details off-line.
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.
I'm trying to do some browser automation, but I'm having some problems. Basically, what I'd like to do is load a set pages, set some forms options, click a button and view the results for each page that I open. Originally, I tried to do this by placing the pages I wanted to automate in iframes and then using javascript to drive the interactions I want in each, but that results in a Permissions Error, since the sites I want to automate are not on my server. Is there any way around this? The other possibility I've thought of is to use QT's webkit class and the evaluateJavaScript method to accomplish what I'd like to do, but this seems a bit more heavy weight for something that is, conceptually, pretty simple.
The tasks that I wanted to accomplish weren't really test related, so a lot of the test-frameworks don't fit the use case that I had in mind (I did try to use Selenium, but ran into problems). I ended up doing what I mentioned in original question and injecting javascript into pages through QT. This ended up working pretty well, although it was a pain to debug, since the javascript had to be passed in as a string and the base environment provided by QT's webkit class doesn't reveal a whole lot.
Check out Selenium: http://seleniumhq.org/. It lets you automate Firefox and is probably the easiest to get start with.
Are you trying to do test automation? If so, there are plenty frameworks for that, like Selenium, WatiN, WebAii and even that built in Visual Studio.
Some of them (WebAii is my favorite) allow you to launch test in a real browser like FireFox.
If a peace of software you searching for is more like form filler, than take a look at iMacros, thay have a complete browser-side scriptable solution.
An easier way of doing this would be to use a web debugging proxy and injecting javascript that way. This should allow you to debug the code you wrote within the browser.
I haven't personally used web debugging proxies, But I wrote my own proxy and did this a while ago just for fun and it worked great.