Mirko’s Blog

Anet A8 Tatara steel frame by Orballo printing - REVIEW

2019-03-11T14:50:37+00:00

After my first steps in hobby 3d printing with Anet A8 it was time to make some serious upgrades. Was never too interested in aluminum AM8 version after I saw Tatara steel designs (v1, v1.1). Since shipping from USA to Europe is not cheap, I started searching for European suppliers. It was not as easy as I’ve hoped.

I found some on Ebay UK for 77 GBP + 23 GBP shipping. Totalling to 116 EUR. Local cutters quoted it 200 EUR (!). Both options also leave you with raw steel surface which needs further work (polish and/or color). Then Orballo printing website popped out and it offered their own version for 71 EUR + 15 EUR shipping and is in black powder coated!

But let’s go from the beginning…

Orballo printing service impressions
Orballo’s Tatara steel frame derivative for Anet A8 - first impressions
Assembly
First tests and impressions
“Before and after” prints
So, how good is Orballo Printing Tatara steel frame for Anet A8?
All together… from website to print - the verdict
TODO

Orballo printing service impressions

This company (Spain) was not very well known so I decided to check it online. TrustPilot had more than a few very bad reviews on their service! However it got as much 5-star ratings too. Still, I was worried. While I was browsing the website, Hugo from Orballo contacted me through their website chat. That already was not in line with some reviews about non-existing support, but hey, maybe they invest time in pre-sales and not after sales. Hugo tried to explain that they had only a few issues but that they were all resolved, that they were swamped with work during that time, but still… it took me more than a month to come back and order it.

Website:

Nice design, practical and user friendly. However, it is rather slow. Some parts are not translated too. What I also don’t like is that prices are “tax excluded” at first. After you log in, prices change to “tax included”. Since I logged in as a company with EU VAT ID, I would expect it the other way around. I would also expect payment for EU resident companies to exclude VAT but that was not the case by default. However, I didn’t want to bother with that so I just ordered without raising the ticket.

All in all I give it 4/5, partially also because of the reasons products are not described as detailed as I would like (read below).

Packaging and delivery:

27-2-2019 (Wednesday) - I ordered and payed (late afternoon)

28-2-2019 (Thursday) - Order status was “in progress”

1-3-2019 (Friday) - order was in “shipped” status

… at that time I wanted to change my order (wanted black screws set instead of regular ones). I contacted Hugo and he replied fast that he will take a look but he believes it will be possible. Maybe this was the reason why same day order went to “labeled” status.

4-3-2019 (Monday) - order is in “shipped” status again

8-3-2019 (Friday) - I received the package (Croatia)

Orballo’s website claims 24h for shipping. I cannot confirm exact time 100% because I changed my order during this process, however it was not 24 hours for sure. On the other hand, it does seem fast enough. Although, at the end I didn’t receive black screws but regular ones so I wonder why the delay. I didn’t get any message on the status of that order.

Package arrived in thin cardboard box and individual pieces wrapped in thin foam sheets. I’d say it is OK. Some styrofoam would be better but I nothing was damaged in transport.

However, there were some scratches on the surface and some very minor bending. Some worse case examples you can see on the photos. Scratches don’t look like they were made in transport. It’s more like frame (or part of it) was assembled before. Or it was just not handled too carefully in production process. Personally, I don’t care. It’s steel frame, not underwear :D

Anyway, all together, it is 4/5.

Orballo’s Tatara steel frame derivative for Anet A8 - first impressions

First impression after unpacking everything was very positive. Small pack of Haribo candy was a nice touch. Something to chew on while assembling :) I also see Y belt tensioner metal parts are included, but also spool holder parts, nice. Only one minor error in production found but without any visual or functional effect. Closer inspection reveals that not all plates are exactly 3 mm thick. It varies from 2,80 to 3,00 mm. It might be polishing before powdering, or sheet tolerance, not sure. I don’t feel like it has much influence on stability of the frame.

There’s also no assembly manual but who needs one right? I don’t see how people replacing frames of their DIY 3d printers are not also able to do it without manual. Also, there is enough Tatara stuff online and it should be the same.

When I was asking a local cutter for a quote on cutting Tatara frame, I remember very well that tolerance on steel rod holes was H7. That is -0/+0.018 mm in diameter. This ensures tight fit of steel rods and no wobble. Tatara team suggests other methods of fixing steel rods if that tolerance cannot be met. And here comes my first real worry about Orballo’s Tatara frame, holes were 8,28 mm! I’m afraid steel rods will wobble. We will see.

Further comparing with original Tatara specs just made things worse, but this time I was to blame. Somehow, I expected Orballo is too small company to do much custom designing. When reading “Tatara derivative” I expected they changed a logo on it only. Oh I was wrong. Main frame is much narrower, left and right side for about 15mm, top one too. This however may also be an advantage. This way, there is more space left of the bed to squeeze in bed cable chain. Some steel frames make it hard to do.

It’s still massive and made of steel and I cannot believe that makes much of a difference in rigidity but then I noticed bottom part was changed even more. Orballo removed rigid square frames below the bed, that extend outside and also provide a place to screw in rubber feet to avoid vibrations. Instead, they used much less rigid corner brackets. Knowing one of the biggest flaws of original Anet A8 frame was bending of front Y axes plate, I really disliked this solution. Also, those brackets do have some holes in them, that appear to be useful for screwing in rubber feet, but they’re located too much inside, 10cm away from outside boundaries of the printer and it doesn’t leave me much confidence in stability.

* (Original tatara on the left. Images taken from Orballo and Tatara pages)

More on exact changes from original Tatara frame later. For now, I can just stay that initial good impression turned to worry.

Assembly

It starts great, easy. No manual needed if you have seen a single photo of any similar frame. Holes fit perfectly and securely, and everything is tight and square. I managed to level top and bottom (front/back) plates to only +/- 0.01 degrees difference. Obviously, fact that some parts were a bit bent had no influence on rigidity of the frame.

After first 5 main pieces of the frame are assembled, small issues arise. First, this is marketed as “drop in replacement” but it is not 100% true. Because original Anet A8 frame is 8mm thick and this frame is 3mm, original screws are too long. I anticipated this earlier, thanks to Orballo’s website which offered “related products” on their website when I was ordering the frame. It suggested Prusa i3 frame M3x12 screws package so I ordered that too for about 4€ extra. I’m sorry that only suggestion was regular metallic color and they also offer black ones. I discovered it manually too late to change order. New screws are also way better and they look better. It’s really not an option here, simply buy those too. I think it would be better if Orballo included it in the package with the frame actually. 4€ lower price cannot measure up with frustration of the clients when they try to use the old screws on this frame.

More issues with screws appear. I don’t know how their steel Prusa i3 frame is, but those do not fit Anet frame completely. In example, I cannot screw down X axis motors. Plate is now 5mm thinner and holes in my steppers (original) are not that deep. I found some ugly ones around until I buy new ones. Similar thing, but only visually, is with LCD screen holder. You can screw it with those 12mm screws but 10mm ones would not stick out. Same happened to several less important places like PSU, electronics, etc. Nothing important but for visual puritans, it can be better.

I must say that Tatara team left a big impression on me. They gained my trust with high quality design, rigidity measurements and other material that really explains and supports their design choices. Then they gave it away to Open Source and refuse to even earn money on selling cut frames. You ran into those small design details all the time. In example, Z axis motor plates. Tabs and holes are made in such a way that you can assemble them *after* you have already tightened main frame parts. Tabs are a bit narrower and holes wider, which enables you to slide parts in with no effort. On the other side, small things like that just confirm my suspicion how Orballo is not on that level. Bottom plates I mentioned earlier they replaced with some sort of corner brackets. Of course, those brackets do not have tabs so carefully designed and cannot be inserted later. I had to unscrew front and back plates to insert them. It appears I was wrong about assembly manual. You will be able to assemble frame without it, but you will have some setbacks and you have nowhere to look as this is not a original Tatara frame. Some frustration piles up slowly.

Next setback is Y axis motor plates. There are 2 identical plates here, similar to only single plate of original Tatara v1 (Tatara v1.1 changed the design here completely). And there are 3 assembly holes in the plate. Hm. Original Tatara suggests a single plate in the rightmost hole but supplied plates do not fit. If you use single plate in the middle hole, pinion is not centered with the belt. Only after watching Orballo i3 Prusa video I realized both plates go in 2 (left) holes, pinion is flipped and 9mm spacers are put between plates (not to mention that supplied screws don’t fit anymore because of this). Actually I like this approach more than Tatara’s. It’s way more rigid. Tatara also detected this and upgraded design for v1.1 but this works great too. However, you need longer screws, you need 9 mm spacers. You can print spacers (here) but probably your printer is disassembled by now! I did research of what I need to print before, but there was no way I could have known about this. Luckily, I had some 9 mm aluminum spacer laying around from my CNC project.

* (left: how I thought it should be, right: how it should be + some spacers I’m missing. And yes, supplied screws are too short here)

If you don’t want to do that mistake yourself, here is the list of what you need to get printer in workable state and to avoid future disassembly:

Y axis motor spacer
Tatara for ANet A8 printable parts - what you need from here is Y axis belt tensioner, 2 x Belt Y bed fix, Belt Y bed fix top
not necessary but to avoid ruining your cables I suggest printing some square and round cable helpers from the link above

That said, what didn’t seem like a problem at the start slowly piles up frustration. It’s ok not to include manual but then stick to original Tatara design or include all the necessary parts and screws. This product just cries for correct screws and printable parts set (later ones at least in digital form).

Another difference in design… Z axis stop switch is fixed to the frame using only one slot while original Anet and Tatara use two. Not a big deal since this is a steel frame so you can tighten the screw without worrying about plastic breaking. But still, I really don’t see why effort was taken to make things worse.

Bed is exact copy of Tatara v1.1 (improved v1 version, tiny bit less rigid but 100 g lighter). Good. I used the opportunity to replace the Y axis belt with a better one (with fiberglass). Y axis bearings I replaced with IGUS ones long time ago.

Electronics fit perfectly, holes are correct. LCD screen needs some more printed parts but it is good enough to test. All in all, not the best experience but it ends up with rock solid frame. It does not bend, sits on the flat surface perfectly with no movement at all. Only two things worry me at this stage: steel rods wobble because of too wide holes and front Y axis plate bending because of redesigned bottom frames. But we will see about this in print tests.

Assembly: 3.5/5

First tests and impressions

Very first impression after switching it on and leveling the bed was that printer is more quiet! It seems original Anet frame added to some noise and I wasn’t really expecting it. There is no visible movement of the frame while printing. It is much easier to (re)level bed now because with original frame, every movement of the printer, ever the slight one, made a big difference. Not anymore.

About Y axis front plate bending… until I tightened the belt I could move it about 0.5mm with my finger (compared to maybe 2 to 3 mm on the original Anet frame). It was still too much. However, after tightening the belt, this is not visible to a naked eye anymore. However, I still hate this and prefer original tatara design.

About steel rods wobbling: fixing bed and tightening the belt, also fixing Y axis decreased a wobble but it is still there. Some force is needed to make them move and I wonder if that amount of force is going to be reached when printing but I don’t like it. It’s just a matter of drilling 8 mm holes with better tolerance. I shouldn’t need to deal with this.

May old Anet frame was skewed. I haven’t calibrated the printer yet but I had to delete skew compensation in Marlin. It appears to be perfect or only very slightly skewed.

My LCD screen started to show garbage during print. It is static interference. Is it a metal frame or I wired LCD screen cable closer to other cables this time? You can find many solutions to this online, but I just wrapped some aluminum foil around it and it seems to works now.

At this point, I replaced only the frame and Y axis belt. IGUS bearings on the bed were already there and everything else the same. I don’t have many old test prints but found 2 simple ones to make the comparison. Let’s see how those compare.

“Before and after” prints

The main “enemy” of my old Anet frame was vibration, both on X and Y axes. I managed to make some almost perfect prints after carefully tightening belts, re-leveling bed, slowing down the speed, but it wouldn’t last long before ringing effect was visible. That was what I wanted to eliminate with this upgrade. Second goal for me was to increase the speed. Tatara frame should be able to take double acceleration and jerk.

Test 1 - 20mm hollow cube

Speed 50mm/s (walls 25mm/s), 0.2 mm layer hight, 0.45 mm layer width, 0,4 mm nozzle, 205 C extrusion (Devil Design PLA)

Very simple test of flat surfaces but also the one that shows effects of vibrations. On the right side is old Anet print. At the bottom edge you can see lines caused by vibration. As I said, I could make them go away for short period of time but they would always come back.

On the left side you can see a new print. Those lines are completely gone. For now, ignore diagonal lines on the new print. This is a problem unrelated to the frame (I’m suspecting the fan).

Test 2 - Marvin figure

Speed 50mm/s (walls 25mm/s), 0.2 mm layer hight, 0.45 mm layer width, 0,4 mm nozzle, 205 C extrusion (Devil Design PLA)

I printed maybe 50 Marvins on the old Anet with variable success. However, ringing behind his ears was present on each and every one of them. You can see it on the right. On the left, was my first try and it is not visible anymore. Again, ignore other flaws on the print, this test was targeted at ghosting/vibration and printer/filament is not calibrated well yet.

So, how good is Orballo Printing Tatara steel frame for Anet A8?

Obviously, this is not a complete test. Still much to do (read on to TODO section). But it is enough to form some opinion of the product and Orballo service. After some printing I’d give 4/5 for quality of assembled frame. This wobble in smooth rods worry me, I don’t like Orballo’s bottom frame compared to Tatara (no rubber feet and front plate not so rigid). In fact I already started designing upgrades to address some of those issues (Z axis anti wobble). We will see how it goes and I’ll report.

But point is, I didn’t want to deal with this. I wanted the best metal frame I can find. Tatara guys left an impression on me. It is a very professional and well thought product. But then comes Orballo’s “derivate” which I don’t understand. Don’t get me wrong, I have positive opinion about Orballo printing, I can definitely see some time and effort invested in their business. They design and sell their own custom full steel Prusa i3 printers, they have good prices and good service. Somebody there had to sit down and spend hours in CAD to change Tatara designs, test them, manufacture and sell. What I don’t understand is WHY? I don’t see any improvements (except maybe Y axis motor plate) so my only conclusion is that they wanted to cut down on costs. But then they include spool holder and black powdered finish which definitely is not cutting down costs. Was it worth 30€ (+ painting) difference for me or I was better off ordering original design from Ebay? Honestly I don’t know. I can tell it’s not the best frame out there, at least not in Europe. Best value for price? Most probably.

All together… from website to print - the verdict

I already wrote about Orballo service and after assembling the printer I think I need to come back to that. I like the company, their prices, website, selection of products, communication with Hugo. I will buy from them again. I also see some effort there to make their own products and to make them good and affordable. However I cannot shake off the feeling they’re just one step too short. Maybe understaffed? Sometimes I have a feeling it is a single person company. Just a few tiny steps are required… include manual or video, include correct screws with the frame, link to printable parts, take more care in documenting your in-house products online. If you have to change excellent Tatara design, explain why! Explain what were your goals and compromises made, backup your decisions with facts and comparisons, stand behind it! Right now, I have many Tatara posts, user group, tests and documents where they explain their choices and stand behind it. Orballo has almost nothing to back up their design changes and then only authority of designer is waged. Tatara wins there easily.

Pros:

relatively fast delivery
good communication with seller
huge improvement compared to original Anet A8 frame
black finish and spool holder included
good price

Cons:

no manual (and you do need it!)
not as rigid as original Tatara design (main frame narrower, bottom frame dramatically changed, no proper place for rubber feet)
smooth rod holes wobble as are not made to Tatara tolerances (holes too wide)
screws set is extra and does not 100% fit this model

Verdict:

Recommend? YES

Final rating: 4/5

TODO

I’ll update this post and (hopefully) write new ones as I manage to do more tests and upgrades. On my list is:

properly calibrate printer and do more complex tests (speed tests too!)
design and upgrade parts to fix wobbly smooth rods
test if fixing leadscrews is a good thing to do or makes things worse
upgrade to Titan extruder (Bowden) with V6 hotend and BL touch sensor (all AliExpress copies)
upgrade board to RAMPS 1.4 + MEGA2560 + LCD 12864
upgrade to Octoprint using Raspberry Pi B
make alu extrusion/wood/plexiglass enclosure with smoke detector, external display and camera

So… stay tuned for news and please comment/correct me if I made any errors!

Javascript next month (or previous month) with snapping to the first/last day of a month

2017-01-10T00:00:00+00:00

I’m working on some hotel booking reports and needed flexible selection of date ranges. Solution was flexible, user could select any date range he/she wanted, but this came with the cost of bad UI usability/efficiency. Users do require to be able to select some very specific date ranges for their reports but often they just wanted to select a complete month and then browse easily to previous/next one. JavaScript calendar did the job, but required too many clicks to do it. Solution was obvious, add “month browsing buttons” to UI.

The challenge
The solution

The challenge

At first, adding +/- month buttons seemed trivial. I thought something like date.setMonth(date.getMonth()+1) would do the job, but I was wrong. Not all months have equal number of days, it can be anywhere from 28 to 31. If you simply add a month to a month having more days than the next one - overflow happens:

let date = new Date('2016-1-31')
date.setMonth(date.getMonth()+1)
console.log(date.toDateString())

Above code outputs Wed Mar 02 2016. There is a logic to it, but for financial/booking reports it is not what you want.

It would be easy to enable my users to browse only by complete month, but they sometimes need to browse by month, but not by complete month. I.e. they want only first 10 days of months. So, clicking “next month” on the date range 2016-1-1 to 2016-1-10 needs to bring them to 2016-2-1 to 2016-2-10.

I wanted to minimize number of UI elements and clicks so I needed an intelligent solution that will guess what user wants without adding more UI elements. Base of that logic was:

if any of date range boundaries (from or to date) is the first or the last day of the month - add/substract a month but make sure resulting boundary remains the first/last day of the month.
if a date range boundary is not the first or the last day of the month - keep it that way but still take care of the overflow

The solution

I decided to extend standard JavaScript Date. This is NOT a good practice (read this) but for this demonstration and my testing it was the simple thing to do.

Date.prototype.isLastDayOfMonth()

First I needed a helper to be used in nextMonth() and prevMonth() - any easy way to check if a date is the last day of the month:

Date.prototype.isLastDayOfMonth = function() {
	let check = new Date(this.getTime())
	check.setDate(check.getDate() + 1)
	return check.getDate() === 1
}

Test is very simple. It adds a day to a date and checks if it became 1st in the month. Returns true or false.

Date.prototype.nextMonth()

Now to more difficult part:

Date.prototype.nextMonth = function() {
  let oldDate = new Date(this)
  let oldMonth = oldDate.getMonth()
  
  let newDate = new Date(oldDate)
  newDate.setMonth(oldMonth+1)
  let newMonth = newDate.getMonth()
  
  //prevent overflow
  if (newMonth-oldMonth > 1) {
    newDate.setDate(0)
  } else {
    //snap to last day of month (not needed if overflow was fixed)
    if (oldDate.isLastDayOfMonth()) {
      newDate = new Date(newDate.getFullYear(), newMonth + 1, 0)
    }
  }
  
  return newDate
}

So, original date.setMonth(date.getMonth()+1) idea is here extended with another check and that is overflow check. If adding a month resulted in month number difference larger than 1, we have an overflow!

Note that I ignored turn of the year because then, month 12 (which is 11 in JavaScript because months are zero-based) turns to month 1 (which is 0) and that makes a difference of -11 which makes newMonth-oldMonth > 1 return false and overflow will not be fixed. Thats is what we want because it is never needed (December and January always have 31 days so overflow cannot happen).

Overflow is simply fixed by newDate.setDate(0). Since dates are not zero-based in JavaScript (like months are), setting a date to 0 basically means 1 day before 1st in month, which is always the last day of previous month.

“Snapping” to the last day of the month

Another important check here is oldDate.isLastDayOfMonth(). This is what makes it “intelligent”. This part tries to guess what user wants. So if original date was the last day of the month, we will make sure that result also is. Because most probably user does not expect to select ‘2016-2-29’, click next and get ‘2016-3-29’. We can bet he wants ‘2016-3-31’. This line fixes overflow: newDate = new Date(newDate.getFullYear(), newMonth + 1, 0)

There are two things we DON’T do here (for performance) and it might be important to notice them:

When “snapping” to the last day of the month, we don’t check if date needs to be “snapped” at all. So, second part of check oldDate.isLastDayOfMonth() && newDate.isLastDayOfMonth() is not being done. This means we will “snap” newDate even if it is already the last day of the month. That’s because isLastDayOfMonth() is more expensive than snapping itself. At least it looks like that to me but I never tested this :)
We don’t do “snapping” if overflow was fixed before. That’s why I’ve put it in else within overflow check. Fact is, overflow fix sets the date to the last day of the month so we can be sure it’s not needed.

You can check finished nextMonth() with quick demonstration:

cconsole.log('nextMonth')
console.log('2016-11-30 => ' + new Date('2016-11-30').nextMonth().toDateString())
console.log('2016-12-31 => ' + new Date('2016-12-31').nextMonth().toDateString())
console.log('2016-1-31 => ' + new Date('2016-1-31').nextMonth().toDateString())
console.log('2016-2-29 => ' + new Date('2016-2-29').nextMonth().toDateString())
console.log('2016-3-31 => ' + new Date('2016-3-31').nextMonth().toDateString())
console.log('2016-4-30 => ' + new Date('2016-4-30').nextMonth().toDateString())
console.log('----')
console.log('2016-4-29 => ' + new Date('2016-4-29').nextMonth().toDateString())
console.log('2016-1-30 => ' + new Date('2016-1-30').nextMonth().toDateString())
console.log('2016-2-15 => ' + new Date('2016-2-15').nextMonth().toDateString())
console.log('----')
console.log('2016-1-1 => ' + new Date('2016-1-1').nextMonth().toDateString())
console.log('2016-2-1 => ' + new Date('2016-2-1').nextMonth().toDateString())
console.log('2016-3-1 => ' + new Date('2016-3-1').nextMonth().toDateString())
console.log('2016-12-1 => ' + new Date('2016-12-1').nextMonth().toDateString())

Date.prototype.prevMonth()

Going to previous month is very similar:

Date.prototype.prevMonth = function() {
  let oldDate = new Date(this)
  let oldMonth = oldDate.getMonth()
  
  let newDate = new Date(oldDate)
  newDate.setMonth(oldMonth-1)
  let newMonth = newDate.getMonth()
  
  //prevent overflow
  if (oldMonth-newMonth === 0) {
    newDate.setDate(0)
  } else {
    //snap to last day of month (not needed if overflow fixed)
    if (oldDate.isLastDayOfMonth()) {
      newDate = new Date(newDate.getFullYear(), newMonth + 1, 0)
    }
  }
  
  return newDate
}

In fact, only a few details are changed: setMonth goes -1 when initialising newDate and overflow condition is a bit different (if (oldMonth-newMonth === 0)). This means you can easily merge prevMonth and nextMonth into single function if you want.

Some code to demonstrate prevMonth():

console.log('prevMonth')
console.log('2016-11-30 => ' + new Date('2016-11-30').prevMonth().toDateString())
console.log('2016-12-31 => ' + new Date('2016-12-31').prevMonth().toDateString())
console.log('2016-1-31 => ' + new Date('2016-1-31').prevMonth().toDateString())
console.log('2016-2-29 => ' + new Date('2016-2-29').prevMonth().toDateString())
console.log('2016-3-31 => ' + new Date('2016-3-31').prevMonth().toDateString())
console.log('2016-4-30 => ' + new Date('2016-4-30').prevMonth().toDateString())
console.log('----')
console.log('2016-4-29 => ' + new Date('2016-4-29').prevMonth().toDateString())
console.log('2016-1-30 => ' + new Date('2016-1-30').prevMonth().toDateString())
console.log('2016-2-15 => ' + new Date('2016-2-15').prevMonth().toDateString())
console.log('----')
console.log('2016-1-1 => ' + new Date('2016-1-1').prevMonth().toDateString())
console.log('2016-2-1 => ' + new Date('2016-2-1').prevMonth().toDateString())
console.log('2016-3-1 => ' + new Date('2016-3-1').prevMonth().toDateString())
console.log('2016-12-1 => ' + new Date('2016-12-1').prevMonth().toDateString())

And that’s it! I’m always looking to make things smaller/faster so please let me know if you have some better methods! With no external libraries of course :)

Automatic testing of web forms with CapserJS (PhantomJS)

2017-01-05T00:00:00+00:00

How many times have you realized your web forms stopped working some time ago? You lost your sales, maybe you’re spending some marketing budget to bring those customers to your website and all their inquiries ended up nowhere. You’re angry, and if it was for your client you have even more problems. Maybe it was a bug in your script, maybe server was down or maybe even everything was ok but mail was not delivered because mail server had an issue.

I had this many times and once I reached hundreds of web contact forms for 20 websites of a single client, it was time to solve it. I decided to build a tool which will behave as a regular browser, go through each form, submit (possibly with different scenarios) and monitor email of the client to make sure email is delivered. Tool should be executed automatically over night and send errors (if any) in email in the morning.

This is what I’ll cover in this post:

Node.js an CasperJS/PhantomJS to the rescue
Running CasperJS in Nodejs
First CasperJS test script
Running CasperJS tests from Nodejs.
Making it dynamic (and configurable) using MongoDB
Last but not the least - is email delivered to inbox?
Wrapping it up
Hosting

Node.js an CasperJS/PhantomJS to the rescue

I checked Selenium browser automation but wanted something simple which works through Nodejs. That’s how I found PhantomJS which is “headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.”. That’s what I was looking for, a browser I can control with JavaScript to execute my test scripts.

To make it simpler, a bit more abstracted, CasperJS was the next tool: “CasperJS allows you to build full navigation scenarios using high-level functions and a straight forward interface to accomplish all sizes of tasks”. Another bonus of CasperJS is that besides PhantomJS (which is WebKit) it also supports SlimerJS which runs on top of Gecko, the browser engine of Mozzila Firefox. This enabled me to test different browsers using same test scripts.

Running CasperJS in Nodejs

This is not as easy as it might seem at start. WebKit and Node don’t run in the same environment so communication between the two is not trivial. I checked SpookyJS which makes it easier to drive CasperJS from Nodejs but at the end decided not to use it because running CasperJS as a subprocess call from Node (exec()) was simple enough for what I need.

So, at the end my package.json dependencies section was looking like this:

"dependencies": {
    "basic-auth-connect": "^1.0.0",
    "body-parser": "^1.15.2",
    "casperjs": "^1.1.3",
    "express": "^4.14.0",
    "express-handlebars": "^3.0.0",
    "mongodb": "^2.2.12",
    "phantomjs-prebuilt": "^2.1.13"
}

It also has some other stuff like mongodb, express, etc. That’s for later.

First CasperJS test script

Since I wanted many test scenarios to be executed, I decide to put them in ./tests/ folder of my project. CasperJS comes with CLI so casperjs <testfile.js> will run your test. This makes it easy to test your script before even wrapping Nodejs around it. My first test scenario was fairly simple, what I want to do is:

open contact form page
fill in the form with test data
click submit button
make sure resulting page reports success

For this, CasperJS test script looks similar to:

// open form page
casper.start("http://myweb.com/formurl", function(response) {
    if (response === undefined || response.status === null || response.status >= 400) {
        this.die('ERROR loading initial url')
    }
})

// wait for form to be loaded and fill it
casper.waitForSelector(
    'form.contactform', // CSS3 (or Xpath!) selector to find form on the page
    function() {
        try {
            // pass an object with filed names and values to fill
            this.fill('form.contactform', {name: "Formtester", email: "fomtester.myweb.com"}, false)
        } catch (e) {
            this.die('ERROR filling form fields')
        }
    },
    function() {
        this.die('TIMEOUT waiting for form to load')
    }
)

// find and click submit button
casper.then(function() {
    if (!casper.exists("input.submit")) { // CSS3 (or Xpath!) selector to find submit button on the page
        this.die('ERROR, no submit button found.')
    }
    this.click("input.submit")
})

// wait for thankyou page
casper.waitForUrl(
    new RegExp("thankyou.html"),
    function() {},
    function() {
        console.log('current url:', this.getCurrentUrl())
        this.capture('screenshot.png') //you can even capture screentshot of the errored page!
        this.die('TIMEOUT waiting for thankyou page')
    }
)

// check if thank you page reported succes
casper.then(function() {
    const pageText = this.evaluate(function() {
        return document.body.innerText
    })
    if (!new RegExp("thank you").test(pageText)) {
        this.die('ERROR submitting form. Unexpected thankyou page message')
    }
})

// return OK if all passed and exit
casper.run(function() {
    this.echo('OK').exit()
})

Script is commented so should be pretty self-explanatory. It also reveals some cool stuff you can do with CasperJS and PhantomJS, like capture('screenshot.png') which enables you to capture a screenshot of the page (or only part of it!). Basically, complete DOM is accessible, together with events you can monitor or emit (like mouse clicks). It’s obvious you can do much more with this setup than simple form testing!

Running CasperJS tests from Nodejs.

As mentioned earlier, I decided to use Nodejs subprocess. There are other options but this one was simple enough for what I needed. It’s just a matter of doing an exec() call to casperjs. I’ve created a testRunner.js Nodejs module to make it reusable for more complex scenarios later. Core of this will be something like:

console.log('executing casper test')
exec('casperjs ./tests/myFirsttest.js',
    { env: { 'PATH': '/usr/bin:./node_modules/.bin/:/app/.heroku/node/bin' } },
    function(err, stdout, stderr) {
        if (err || stdout.trim() !== 'OK') {
            console.log('ERROR. stdout was:' + stdout)
        } else {
            console.log('success')
        }
    }
)

Please note that I’m also passing env to exec(). This makes sure Nodejs finds CasperJS and PhantomJS executables, in my local environment but also in future Heroku environment where I can run this for free because it’s really simple app which runs only once per day, spending almost no resources.

Another thing to note here is that I’m reading stdout from casperjs at the end of execution. It is simple enough for what I need, but you could also subscribe to stdout/stderr of Nodejs subprocess and make CasperJS more verbose. This way you can achieve more complex scenarios.

Making it dynamic (and configurable) using MongoDB

Well, it’s not much of a work to execute single scenario for a single form, but I needed several scenarios for many forms. I’m not going to write all boilerplate here (will share complete project to GitHub soon), but I’ll mention most important parts in next steps on my list:

1. extract all scenario-specific data (like form url, form selector, form filed names with values, etc.) from first CasperJS script into JSON object. Example of the result:

{
    "type": "myFirstTest.js",
    "url" : "http://myweb.com",
    "formSelector" : "form.contactform",
    "formFill" : {
        "name" : "FormTester TEST",
        "phone" : "123456789",
        "emailaddress" : "formtester@myweb.com",
        "comment" : "TEST TEST"
    },
    "submitButtonSelector" : "input.submit",
    "thankyouPageUrlRegex" : "/thankyou.html$",
    "thankyouPageTextRegex" : "Thank you"
}

2. refactor test script to receive this JSON as input (to reconfigure test accordingly). This included passing some more options to Nodejs exec() in my testRunner.js:

exec(`casperjs ./tests/${test.type}.js --options='${encodeURIComponent(JSON.stringify(test.testOptions))}'`...

Note encodeURIComponent() usage which is necessary if you have weird characters in your config (quite usual for multi-language sites).

3. store test(s) JSON to MongoDB for easy management of tests (and later test execution logs). Here, I added some more properties for each test. In example _id field which is MongoDB’s unique identifier. Nice thing about it is that it contains a timestamp too which I’ll use later to know when each test is executed, so I get both timestamp and unique identifier in the same field.

4. make runAllActiveTests() Nodejs script to go through each test in MongoDB and execute it through testRunner. Apart from simple looping through MongoDB query result of all active tests, important thing to do here was to implement multiple scenarios. So note "type": "myFirstTest" in JSON above. Each type of test (or scenario) will have a corresponding CasperJS script in ./tests/ folder. This way, we can reuse same scripts for many tests/websites (changing only test config in DB) but can also make variations. In practice this is often the case with multi-language sites where single scenario (CasperJS test) works easily on different languages, but different sites (or completely different things we want to test on the same site) require some different steps in the test script. Also, here we log execution status of each test to MongoDB, we will need it later for reporting.

Last but not the least - is email delivered to inbox?

It is very important to know if email is delivered. Often, website reports success but for many possible reasons email is not delivered. What I did is a simple API to Nodejs app which receives TestID, searches for it in DB and marks it’s status as “email received” or “success”. Now all we need to do is somehow instruct mail server to trigger that API call when email is received.

I simply love Google Apps and this is one of the reasons. It’s very simple to do it using Google Apps Script. Even if you/your client don’t use Gmail, you can simply tell their mail administrator to forward emails from formtester@myweb.com to your Gmail inbox of choice and deal with mail there. To make filtering on mail server easier, and to pass Test ID to mail server, we will append string [FormTester:<TestID>] to any of the form fields during execution of CasperJS test (i.e. “comment” field). This text should be included in email sent by the form, thus visible to mail server to process it. Simple! And does not require any changes to the code in form submitting procedures of the website (a very important requirement)!

So, after you configured email forward to Gmail formtester account, remaining steps to make it work are:

Create a label formTester in Gmail which will store form emails.
In Gmail, create filter for incoming mail that will move all mails having string [FormTester: into folder/label above.
Create GApps script which will go through all mails labeled formTester, extract FormID from each and call our API with it. Part of GApps script to call API:

/**
- call FormTester web API and trigger confirmation action with passed testId */ function triggerApiConfirmation(testId) { var url = apiUrl + ‘/confirm-email-receive?id=’ + testId; var response = UrlFetchApp.fetch(url, {“method”: “GET”, “headers”: headers, “muteHttpExceptions”: true}); if (response == ‘OK’) { Logger.log(‘triggered API received confirmation with success, got: ‘ + response); } else { Logger.log(‘triggered API received confirmation but got error: ‘ + response); } return response; }

And loop to call it on each mail with formTester label:

// GLOBAL SETTINGS (for all scripts)

var inboxLabel = GmailApp.getUserLabelByName('[FormTester]');  //label where formtester email comes to
var apiUrl = 'http://mywebapi.com'; //API root URL
var adminEmail = 'me@myweb.com';  //where to send system errors
var selfEmail = 'formtester@myweb.com'; //own email (where we send failed email)
var headers = {
  "Authorization" : "Basic " + Utilities.base64Encode('apilogin:apipass')
};

/**
* go through FormTester label threads and detect emails with testId
*/
function monitorEmails() {
  var threads = inboxLabel.getThreads();
  //loop through threads
  for (var t = 0; t < threads.length; t++) {
    var emails = threads[t].getMessages();
    //loop through messages
    for (var i = 0; i < emails.length; i++) {
      var email = emails[i];
      if (email.isInTrash()) continue;
      var regexResult = email.getPlainBody().match(/\[FormTester:([0-9a-f]{24})\]/);
      if (regexResult && regexResult[1]) {
        var testId = regexResult[1];
        //trigger API call if TestId detected
        Logger.log('FormTesterEmailRecognized containing ID=' + testId);
        var response=triggerApiConfirmation(testId);
        if (response == 'OK') {
          email.moveToTrash();
        } else {
          email.forward(selfEmail, {"subject": "[FormTesterError:"+testId+"] - response:"+response});
          email.moveToTrash();
        }
      } else {
        email.forward(selfEmail, {"subject": "[FormTesterError:noIdFound]"});
        email.moveToTrash();
        Logger.log('email detected but TestId not found in it! Forwarding email to self.');
      }
    }
  }
}

Wrapping it up

Again, no boilerplate in this article. GitHub project will soon be available where you’ll be able to see the complete code. Here is just a simple list of tasks:

Create 2 more scripts in GApps (and corresponding API calls in our Nodejs app): 1) script to start execution of all active tests, 2) script to get statuses of all tests and email reports
Put all GApps scripts into scheduler so they’re executed over night, in this order: 1) execute all tests, 2) execute email monitor/parser, 3) get statuses and email report
Build some frontend to manually see test statuses.

Example of mine:

Hosting

As mentioned above I used Heroku to host this project. Since service is mostly needed only couple of times over night you will spend almost none Dyno hours there which makes it a free hosting for smaller projects. It’s easy to upgrade later for more serious tests. Of course like usual with Heroku, server management is none and deployment is a breeze, just link GitHub branch with Heroku and whatever you push there gets published. Or you can use one of many other equally simple deployment methods.

Feel free to leave me a comment or suggestion.