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:

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

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.

 driver
 .webview()
    .elementByCssSelector( '.location-city .input-tips' )
 .tap() //Re-awaken the city selection component, see the figure below
 .sleep(500)
    .elementByCssSelector( '.province-list .list-item:nth-child(2)' )
 .tap() //Reselect the province
 .sleep(500)
    .elementByCssSelector( '.area-list .list-item:nth-child(3)' )
 .tap() //Reselect area
 //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.