Making ERPNext Help Videos with Scripting

By Umair Sayyed August 26, 2017 Technology 7 comments

"Please teach me how you create the help videos of ERPNext. Please, please, please", Bhagyashree insisted, when we met at the yearly ERPNext conference.

"Sure. Buy yourself a Mac, and then we can move forward", I said. A reply just enough to push an assignment to limbo ;)

Those were the days when we were creating help videos by recording audio and video separately and merge both in, wait for it, iMovie. But just like medicines has an expiry date, so does ERPNext UI, design and our approach to solving problems. Rushabh came up with the idea of making help videos with all new approach, scripts! And that's how it was ought to be made at Frappe. Wasn't it?

Introducing, a tool to make ERPNext help videos by writing a script. This application is developed based on a testing framework called TestCafe. On top of it, we have added many standard functions to make the scripting part really simpler. For example, to click on the module icon, you just write
await f.click_icon("Manufacturing")


If you want to add a computer generated narration in a help video, use "speak" function.
await f.speak(`Hello World`)
To enter a value in the fields of types Data, Date, Link and Check field, use fill_field function.
await f.fill_field("field_name", "value")


The buttons like Save, Submit, Amend belongs to the CSS class called Primary Button. If you want to click one of these buttons, use the following function.
await f.click_parimary_button("Save")

Functions to navigate and create new records in masters which are maintained in the tree structure.
await f.click_tree_node("All Warehouses - Abbr")
await f.click_tree_node_option("Add Child")

Click here for the list of all the functions readily available to create a help video for an application based on Frappe Framework.

Once you have written the complete script to record a video on particular subject of ERPNext, run it from your TestCafe repository test by writing a command
node chrome videos/production__order.js
Where chrome can be replaced with any browser.
And production_order.js can be replaced with file name where the script for your video is saved.

On running this script, the new browser window will open. You will be logged into the ERPNext account based on the credentials provided in the template section of the script. And then based on the video functions, TestCafe would navigate and create entries in your ERPNext account just like we operate manually.

Now, to create a video out of it, all you need is a screen and audio recorder. We use Quicktime Player for recording an ERPNext window which is being controlled by a TestCafe.

We are hopeful that this tool will allow ERPNext community members to also contributions help videos, and help us cover the more ground in terms of creating help video content on how to make most of ERPNext or of Frappe based application.

And hoping that we made your trip to ERPNext conference worthwhile, dear Bhagyashree :)


Umair Sayyed

Umair is the Chief Customer Officer at ERPNext. He has done more than 50 ERP implementations remotely and replies to most incoming inquiries.

7 comments
Robert Becht August 27, 2017

Is there an example of these computer generated videos apart of the very speedy GIF presented above....looks very innovative....

Umair Sayed August 30, 2017

Following is the script of help video on Production Order.

https://github.com/frappe/video/blob/master/videos/production_order.js

Here is the output, the video on Production Order is based on the script.

https://www.youtube.com/watch?v=yv_KAIlHrO4&list=PL3lFfCEoMxvxDHtYyQFJeUYkWzQpXwFM9&index=30

We have added some stock images from iMovie just for the effect.

Nkwo Chidubem September 28, 2017

Hi, is there a way i can select an option from a data-field type Select.

I have tried the await f.fill_field("fieldname", "Options") and its still not working.

please kindly advice how with a little example(test code).

Thanks

Umair Sayed September 28, 2017

Hi,

Here is an example of selecting a value from a Select field.

https://github.com/frappe/video/blob/master/videos/production_planning.js#L34

Instead of field name, try Label. Ensure that exact value is entered for the option to be selected.

Nkwo Chidubem October 4, 2017

It worked, thanks Sayed

javad kaef October 28, 2017

Hi. There is not any ebook or comprehensive tutorial videoes about erpnext or frappe unlike odoo! The frappe team shoud consider this.

Umair Sayed October 28, 2017

We keep updating our manual on regular bases, then an ebook might get out-dated soon. Also, our online manual makes it easy for searching, even on Google. If you need help on specific issues, please search/report them on https://discuss.erpnext.com

Add Comment