Using macaca for mobile hybrid automation testing (Part 1)

[[174581]]

Some basic concepts and contents:

Unit Tests:

Test your code as a module to ensure that the module you wrote is logically correct. As long as the input value does not change, the output value should not change.

Front-end automated testing:

• Interface regression testing tests whether the interface is normal, including text, pictures, etc.
• Functional testing includes whether the interaction logic and functional modules meet expectations.
• Performance testing page performance is receiving more and more attention, and performance needs to be continuously monitored during the development process, otherwise it will easily decline with business iterations.

The main content of this article focuses on interface regression testing and functional testing. These two parts of testing work are to simulate user page operations and check whether the functions are running normally by checking the changes in page status: its testing process is:

1. DOM element selection
2. Trigger DOM element binding event
3. Check whether the binding event result is expected

How to do front-end UI automation testing

To complete front-end UI automation testing, you need at least a test framework and an assertion library.

Tool selection

Headless interface:

1. PhantomJS includes the WebKit browser engine and the script interpreter of the JavaScript API, so you can run js code. It just doesn't provide a graphical interface, and other functions are the same as browsers. For example, if some crawlers crawl a website, and the website is not static, then Js needs to be executed. Therefore, PhantomJS provides the function of executing the code in the page.
2. casperjs. is developed based on PhantomJS. It provides the same functions as PhantomJS, but with a more concise syntax. It is not as disgusting as PhantomJS callback hell. It is also different from PhantomJS in that it directly provides testing functions, such as assertion testing of remote DOM, and can also write functional test suites. For detailed API documentation, please refer to the official website of casperjs.

 casper.start( 'http://www.google.fr/' , function () { //Open Google homepage, add callback function when page loading is complete
 this.test.assertTitle( 'Google' , 'google homepage title is the one expected' ); // Check if the page title is 'Google' , if so, output the string specified by the second parameter
 this.test.assertExists( 'form[action="/search"]' , 'main form is found' ); //Check if the element specified by the selector exists on the page. If so, output the string specified by the second parameter.
 this.fill( 'form[action="/search"]' , { //Fill in the form and submit, perform the search operation
 q: 'foo'  
 }, true );
 }); 
 
 casper.then ( function (){
 this.test.assertTitle( 'foo - Recherche Google' , 'google title is ok' ); //Check if the page title of the search results page is correct
 this.test.assertUrlMatch(/q=foo/, 'search term has been submitted' ); // Check if the URL of the search results page matches the specified regular expression
    this.test.assertEval( function () {
 return __utils__.findAll( 'h3.r' ).length >= 10; //Customize a detection function
    }, 'google search for "foo" retrieves 10 or more results' );
 }); 
 
 casper.run( function () {
 this.test.renderResults( true ); //Output test results
 });

UI Testing

nightwatch (simple syntax to quickly get started with the powerful Selenium WebDriver API to execute commands and assertions on DOM elements)

 module.exports = {
 'Demo test Google' : function (client) {
 client
      .url( 'http://www.google.com' )
      .waitForElementVisible( 'body' , 1000)
      .assert.title( 'Google' )
      .assert.visible( 'input[type=text]' )
      .setValue( 'input[type=text]' , 'rembrandt van rijn' )
      .waitForElementVisible( 'button[name=btnG]' , 1000)
      .click( 'button[name=btnG]' )
 .pause(1000)
      .assert.containsText( 'ol#rso li:first-child' ,
 'Rembrandt - Wikipedia' )
 .end ();
 }
 };

nightmare.js is a set of high-level APIs (very semantic: click, refresh, goto...) encapsulated for testing based on phatomJS. At the same time, nightmare is also based on electron, so it also provides GUI interface tools. When you use nightmare.js for automated testing, you can see all the simulated user actions.

 yield Nightmare()
  .goto ( 'http://yahoo.com' )
  .type( 'input[title="Search"]' , 'github nightmare' )
 .click( '.searchsubmit' );

1. Protractor is the son of Angular and is an E2E testing tool developed by the Angular team. It also provides an API that simulates user operations to verify the operation status of Angular.
2. I haven't used selenium yet, but there is a lot of information about it on the Internet.
3. macaca The key points of this series
4. Appium supports testing on multiple platforms including iOS, Android, and Firefox. It supports native, H5, and hybrid, as well as all scripting languages ​​that support the jsonWireProtocal protocol: Python, Java, NodeJS, and Ruby can all be used to write test cases. It actually includes: a. An express-based server for sending/receiving client-side protocol commands;
5. As a bootstrap client, it is used to pass commands to the corresponding UIAutomator/UIAutomation/Google's Instrumentation

Testing Framework

The function of the test framework is to run the script tool written by the test developer. The test framework will capture the AssertionError thrown by the code and output it in the console or web page. The test framework provides specific test syntax, which is generally divided into two categories: TDD (test-driven development) and BDD (behavior-driven development). The test framework usually provides TDD (test-driven development) or BDD (behavior-driven development) test syntax to write test cases.

TDD: means writing the test code first, and then writing the code based on the test. Its steps are generally:

1. Write a test
2. Write the minimum amount of code to keep the test passing
3. Optimizing the code
4. Repeat the previous work

BDD: Don’t test code details, but test behavior

The most commonly used testing frameworks are:

1. mocha
2. jasmine

Assertion Library

The purpose of an assertion is to determine whether the actual execution result of the source code is the same as the expected result. If not, an error is thrown.

• chai

chai.js provides three assertion styles: assert, expect, and should. You can choose the assertion style according to your preference. For specific APIs, please refer to the relevant documentation.

Using the above tools, you can basically start testing the test scripts.

The following article will introduce how to use macaca to test hybrid applications.