Using macaca for mobile hybrid automation testing (Part 4)

Using macaca for mobile hybrid automation testing (Part 4)

Now it is time to test the webview in native. For example, I want to test a component for selecting a city:

The main idea is to simulate a series of user operations and then see whether the test results are consistent with expectations.

First, check the corresponding DOM node through the console, obtain the corresponding DOM element through the API provided by macaca, and then trigger user operations.

The following is still done in the REPL environment:

  1. driver
  2. .webview()
  3. .elementByCssSelector( '.location-city .input-tips' )
  4. .tap() //First, call up the city selection component, as shown in the figure below①
  5. .sleep(500)
  6. .elementByCssSelector( '.province-list .list-item:nth-child(3)' )
  7. .tap() //Click the third element of the province, see the figure below②
  8. .sleep(500)
  9. .elementByCssSelector( '.city-list .list-item:nth-child(4)' )
  10. .tap() //Click on the fourth element of the city, see Figure ③ below
  11. .sleep(500)
  12. .elementByCssSelector( '.area-list .list-item:nth-child(6)' )
  13. .tap() //Click the sixth element in the area, see Figure ④ below
  14. .sleep(500)
  15. .elementByCssSelector( '.location-city .input-tips' )
  16. .text()
  17. . then ( function (value) { //You can see the selected city content output in the console, see Figure ⑤ below
  18. console.log(value);
  19. });

Figure 1:

Figure 2:

[[174582]]

Figure 3:

Figure 4:

Figure ⑤:

Figure 6:

[[174583]]

You can see that the current function is executed as we expected.

Now let me test another situation:

If you select a province and region but not a city, a pop-up window will appear.

  1. driver
  2. .webview()
  3. .elementByCssSelector( '.location-city .input-tips' )
  4. .tap() //Re-awaken the city selection component, see the figure below
  5. .sleep(500)
  6. .elementByCssSelector( '.province-list .list-item:nth-child(2)' )
  7. .tap() //Reselect the province
  8. .sleep(500)
  9. .elementByCssSelector( '.area-list .list-item:nth-child(3)' )
  10. .tap() //Reselect area
  11. //At this time, a pop-up window will appear, see the figure below

Figure 7:

Figure ⑧:

At this time, the function is also running as expected.

Of course, you also need to add assertion-related content to the test script, which is also relatively easy.

I also encountered many problems when writing the webview test script. For example, native restricted the input[type="file"] component that calls native to upload files for security reasons. Some sliding operations were difficult to test, etc. Take your time.

<<:  Using macaca for mobile hybrid automation testing (Part 3)

>>:  Better UI update routine

Recommend

Looking at Xiaomi's e-commerce from Double 11: Fission and crisis coexist

1.16 million mobile phones and a total sales volu...

The most useful "bucket waist" in the world can hold 2 tons of water!

In the magical nature, there are many kinds of cr...

Which eight parts are Demi-Gods and Semi-Devils?

This article was first published by Hunzhi (WeCha...

How much does it cost to develop a mini program in Guangzhou?

In an era when smartphone use has become a daily ...

Latest ranking of global app downloads: TikTok continues to top the list

[[337384]] Sensor Tower, a mobile application dat...

iPhone 6 running score exposed again

iPhone 6 has just started pre-sale, so if you wan...