Hands on: automating scratch with AirtestIDE

On one of my firsts posts in this blog, I went through a hands on about how to automate scratch. The goal was to be able to teach kids how to test, hand by hand with how to develop programs.

Back at the time, the only program that I could find that would allow me to do this automation was not open source. The experience was very nice but since the goal was to use it on coderdojo , the conclusion was that it would not work out to use a paid solution.

Currently, I’m part of the development team on an open source project called ‘Airtest‘. Please note the intention on this post is not to advertise this product, but to provide a different solution that could actually be used in coderdojo. However, I want to disclaim it clearly: I work on this project, also, I am very fond of it.

Part 1: scratch development

Scratch is a simple tool for getting started with developing just it by dragging and dropping easy sentences. I’ve already explained how to create an app with scratch in my previous post, so I am going to assume you know how to do this.

Let’s just use the project that I created as example: http://scratch.mit.edu/projects/48422496/

This program moves a cat (called sprite) 10 pixels every time the user clicks on it. If it reaches a corner it supposes to bounce. The goal is to verify that the cat bounces when reached the corner.

Part 2: Using Airtest project to automate scratch

    1. Go to the official website: http://airtest.netease.com/ and download Airtest IDE. (Note: it is possible that you see some Chinese around as we are based in China, but don’t get too scared, everything should also be written in English)
    2. Click on “File” -> “New” -> “.air Airtest Project”,  to create a new airtest test file1
    3. Make sure you have “Selenium window” options active by clicking “Window”->”Selenium Window” (you can close Airtest assistance, Poco Assistance and devices).                2
    4. You also want to make sure you have your Chrome path configured in “Options”->”Settings”. If you have Chrome installed and are using Windows, this is generally under C:/Program Files (x86)/Google/Chrome/Application/chrome.exe 3
    5. Make sure your cursor is at the bottom of the script editor.  Then, click on the globe icon at the top left of the “Selenium Window” to open a browser for test.4
    6. Click “Yes” on the yellow message that appears on the top. 5Now you could continue with the recording method (right hand side top button on the Selenium Window). However, since scratch is done in flash, we won’t be able to retrieve a selenium element. we would proceed with Visual testing.
    7. Make sure your cursor is at the bottom of the script editor. Click the “start_web” button and input the url in the quoted yellow text. 6 It would look like this:
      driver.get("https://scratch.mit.edu/projects/48422496/")
    8. Make sure your cursor is at the bottom of the script editor. Click the “airtest_touch” button and select the flag so it is within the highlighted rectangle. Double click inside it to confirm the selection  7
    9. Insert a this piece of code (this is a loop to repeat the next sentence 30 times, which would be the cat click):
       for x in range(0, 30): 
    10. Make sure your cursor is at the bottom of the script editor. Click tab once. Click the “airtest_touch” button and select the cat. Double click to confirm the selection. Your code should look like this (I have added a sleep command to wait for the elements but it should not be needed): 8
    11. Click play to see how the program works (make sure to activate flash on the browser for the program to load the first time). Feel free of getting some snack while your computer does your job for you 😉
    12. Bonus step: verify that the cats bounces. You can do this by inserting an “assert_template” and selecting the cat (same as with airtest_touch). However, the program would pass if it finds a cat, in any position, so even if it is upside down. Alternatively, you can create a snapshot to check manually this part.

Conclusion

Since Airtest project’s back-end (poco) is based on Python (a programming language) you can insert loops and other instructions easily.

Because of its powerful IDE which allows for record/playback or the use of simple buttons, it is easy for beginners.

Since visual testing is possible, even within a Selenium test, it works with programs or websites in which object hierarchy (DOM) is not easy/possible to retrieve (such as flash applications).

Because it is open source and the IDE is free, it can be used in teaching.

There is much, much more that this one tool can do that what is shown here. However, that is… well, another story.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s