Add Typing Effect to Selenium Test Execution

Add coolness to live demonstration with automation assistance.

What is the Typing Effect, and what is its purpose? Watch these two short videos: executing a script in TestWise to sign up for WhenWise.

1. Without Typing Effect (1.5 seconds)

2. With Typing Effect (4.5 seconds)

The typing version is slower.

Some might wonder “Why do you want automated test execution to be slower?”. It really depends on the use case. For an automated E2E test script, of course, the faster the better. But this is an automation script for customer demonstration —  showing the typing effect (and making it slower and easier to follow) is actually better.

To achieve the typing effect in raw Selenium WebDriver (here using Ruby binding as an example) is quite simple.

The original version (Quick).

 elem = driver.find_element(:name, "biz[identifier]") 
 elem.clear
 elem.send_keys("TestWise")

The typing version (Slow).

 elem = driver.find_element(:name, "biz[identifier]") 
 elem.clear
 "TestWise".each_char do |x|
     elem.send_keys(ch)
     sleep 0.075  # can adjust the speed 
 end

I believe most Selenium test engineers can work this out. Basically, it splits the input and sends individual letters with a short delay. By the way, the above script also works for Unicode (I used Traditional Chinese and English in the demo video).

However, the above raw script works but is not good. You don’t want to do the same for 10 text fields on one page, right? Certainly, it lacks reusability. Experienced test automation engineers would have adopted the Page Object Model.

class NewBusinessPage < AbstractPage

  def enter_name(business_name)
    elem = driver.find_element(:name, "biz[name]") 
    elem.clear
    business_name.each_char do |x|
      elem.send_keys(ch)
      sleep 0.075  # can adjust the speed 
    end
  end

  def enter_email(email)
    elem = driver.find_element(:name, "biz[email]")
    elem.clear
    email.each_char do |x|
      elem.send_keys(ch)
      sleep 0.075
    end
  end

end

At the top script level:

    new_business_page = NewBusinessPage.new(browser)
    new_business_page.enter_name("高老師數學補習")
    new_business_page.enter_email("gaomath@biz.com")

The top level is good. However, we can optimise the functions in the page class, which still present duplication.

A solution is to extract a method to the parent class, AbstractPage.

class AbstractPage 
  
  def type_in_text(elem, text) 
    elem.clear 
    text.each_char do |x|
       elem.send_keys(ch)
       sleep 0.075 # adjust the speed, at a single place
    end
  end

end

Then, refactor our page class to use it.

class NewBusinessPage < AbstractPage

  def enter_name(business_name)
    elem = driver.find_element(:name, "biz[name]") 
    type_in_text(elem, business_name)
  end

  def enter_email(email)
    elem = driver.find_element(:name, "biz[email]")
    type_in_text(elem, business_name)
  end

end

A lot better!

However, there is another problem.

Suppose you share the page classes for automated test scripts and automation scripts (for demo), a good practice, the above change will make the whole test execution a lot slower. How do we add this “demo” script without affecting existing ones?

There is a simple solution (Paid members: see the content below by my father), with just minimal changes (thanks to Ruby). It is a good exercise, try working it out.

Below is a very useful automation scripting tip from my father, exclusive to Premium subscribers.