SYSTEM, METHOD, AND COMPUTER PROGRAM FOR TESTING THE ACCURACY OF SOFTWARE THAT IDENTIFIES USER INTERFACE ELEMENTS ON A WEBPAGE

Abstract

The present disclosure relates to a system, method, and computer program for testing the accuracy of software that identifies user interface (UI) elements on a webpage (“the auto-identifier software”). The system enables a user to tag UI elements on a webpage with labels. The system creates a normalized specification for the webpage, where the specification includes a mapping of UI elements to normalized labels. The system uses the auto-identifier software to identify UI elements on the webpage. The system evaluates the performance of the auto-identifier software with respect to the webpage using the specification. The system displays diagnostics related to the performance of the auto-identifier software. In certain embodiments, the method is used for testing the accuracy of autofill software on a webform. In certain embodiments, the method is used for testing the accuracy of cart-scraper software on a checkout page.

Claims

1. A method, performed by a computer system, for testing the accuracy of software that identifies UI elements on a webpage (“the auto-identifier software”), the method comprising: enabling a user to tag UI elements on a webpage with labels; creating a normalized specification for the webpage, wherein the specification is created by a browser extension automatically tagging fields with a label and a user correcting or adding one or more labels to their corresponding field(s) to create and store a representation of all possible UI elements on the webpage plus relevant metadata, wherein the relevant metadata does not include metadata related to styling or behavior, and wherein the specification includes a mapping of UI elements to normalized labels; using the auto-identifier software to identify UI elements on the webpage; evaluating the performance of the auto-identifier software with respect to the webpage using the stored specification; and displaying diagnostics related to the performance of the auto-identifier software.

2. The method of claim 1, wherein the UI elements are fields and wherein the auto-identifier software is designed to automatically fill in fields in a webform.

3. The method of claim 2, wherein the webform is a checkout page.

4. The method of claim 2, wherein the specification for the webform includes a mapping of fields on the webform to normalized field labels.

5. The method of claim 2, wherein evaluating the performance of the auto-identifier software comprises determining whether the auto-identifier software correctly identified and correctly filled the fields on the webform that the auto-identifier software is tasked with auto-filling and correctly ignored the fields on the webform that the auto-identifier software is not tasked with auto-filling.

6. The method of claim 1, wherein the UI elements are text markers and wherein the auto-identifier software is designed to automatically scrape checkout cart data from a webpage.

7. The method of claim 6, wherein the specification includes a mapping of cart data on the webpage to normalized labels.

8. The method of claim 1, wherein displaying diagnostics comprises displaying statistics regarding the performance of the autofill software on the webform.

9. The method of claim 1, wherein displaying diagnostics comprises displaying statistics related to the performance of the software for a select UI element across a plurality of webpages.

10. The method of claim 1, wherein enabling a user to tag UI elements on a webpage comprising providing a browser extension for a web browser that enables a user to tag UI elements on a webpage.

11. The method of claim 10, wherein the browser extension includes code that first automatically tags select UI elements with labels and then enables the user to edit the labels and tag additional UI elements.

12. A non-transitory computer-readable medium comprising a computer program, that, when executed by a computer system, enables the computer system to perform the following steps for testing the accuracy of software that identifies UI elements on a webpage (“the auto-identifier software”), the steps comprising: enabling a user to tag UI elements on a webpage with labels; creating a normalized specification for the webpage, wherein the specification is created by a browser extension automatically tagging fields with a label and a user correcting or adding one or more labels to their corresponding field(s) to create and store a representation of all possible UI elements on the webpage plus relevant metadata, wherein the relevant metadata does not include metadata related to styling or behavior, and wherein the specification includes a mapping of UI elements to normalized labels; using the auto-identifier software to identify UI elements on the webpage; evaluating the performance of the auto-identifier software with respect to the webpage using the stored specification; and displaying diagnostics related to the performance of the auto-identifier software.

13. The non-transitory computer-readable medium of claim 12, wherein the UI elements are fields and wherein the auto-identifier software is designed to automatically fill in fields in a webform.

14. The non-transitory computer-readable medium of claim 12, wherein the UI elements are text markers and wherein the auto-identifier software is designed to automatically scrape checkout cart data from a webpage.

15. The non-transitory computer-readable medium of claim 12, wherein displaying diagnostics comprises displaying statistics regarding the performance of the autofill software on the webform.

16. The non-transitory computer-readable medium of claim 12, wherein displaying diagnostics comprises displaying statistics related to the performance of the software for a select UI element across a plurality of webpages.

17. A computer system for testing the accuracy of software that identifies UI elements on a webpage (“the auto-identifier software”), the system comprising: one or more processors; one or more memory units coupled to the one or more processors, wherein the one or more memory units store instructions that, when executed by the one or more processors, cause the system to perform the operations of: enabling a user to tag UI elements on a webpage with labels; creating a normalized specification for the webpage, wherein the specification is created by a browser extension automatically tagging fields with a label and a user correcting or adding one or more labels to their corresponding field(s) to create and store a representation of all possible UI elements on the webpage plus relevant metadata, wherein the relevant metadata does not include metadata related to styling or behavior, and wherein the specification includes a mapping of UI elements to normalized labels; using the auto-identifier software to identify UI elements on the webpage; evaluating the performance of the auto-identifier software with respect to the webpage using the stored specification; and displaying diagnostics related to the performance of the auto-identifier software.

18. The computer system of claim 17, wherein the UI elements are fields and wherein the auto-identifier software is designed to automatically fill in fields in a webform.

19. The computer system of claim 17, wherein the UI elements are text markers and wherein the auto-identifier software is designed to automatically scrape checkout cart data from a webpage.

20. The computer system of claim 17, wherein displaying diagnostics comprises displaying statistics regarding the performance of the autofill software on the webform.

21. The computer system of claim 17, wherein displaying diagnostics comprises displaying statistics related to the performance of the software for a select UI element across a plurality of webpages.

Description

BRIEF DESCRIPTION OF THE DRAWINGS

[0011] FIG. 1 is a flowchart that illustrates a method, according to one embodiment, for testing the accuracy of software that identifies user interface elements on a webpage.

[0012] FIG. 2 is a flowchart that illustrates a method, according to one embodiment, for testing the accuracy of autofill software on a webform.

[0013] FIG. 3 is a flowchart that illustrates a method, according to one embodiment, for testing the accuracy of cart-scraper software on a checkout page.

[0014] FIG. 4 is a block diagram that illustrates an example system architecture according to one embodiment.

[0015] FIGS. 5A-5K are screenshots of an exemplary user interface, according to one embodiment, for how to create a normalized specification.

[0016] FIGS. 6A-6D are screenshots of an exemplary user interface, according to one embodiment, for how to test changes using a benchmarker.

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0017] The present disclosure describes a system, method, and computer program for testing the accuracy of software that identifies user interface elements on a webpage. The method is performed by a computer system that includes servers, storage systems, networks, operating systems, and databases (“the system”).

[0018] Example implementations of the methods are described in more detail with respect to FIGS. 1-6D

1. Method for Testing the Accuracy of Software that Identifies User Interface Elements on a Webpage

[0019] FIG. 1 illustrates a method for testing the accuracy of software that identifies user interface (UI) elements on a webpage (i.e., “auto-identifier software”). In certain embodiments, the auto-identifier software may include both the client and server software working together. The system enables a user (e.g., an administrator, an employee, a contractor, etc.) to tag UI elements on a webpage with labels (step 110). In certain embodiments, the webpage is a webpage in a browser and a labeling tool is implemented as a browser extension. In certain embodiments, the webpage in the browser corresponds to a webview in a mobile application. In other words, a website may be structured differently between a webpage in a web browser and a webview in a mobile application. In order to test the accuracy of the webview in the mobile application, the webpage in the browser rearranges itself as if displaying the webview in the mobile application.

[0020] The system creates a normalized specification for the webpage that includes a mapping of UI elements to normalized labels (step 120). In certain embodiments, a specification is a representation of all possible UI elements on a webpage plus relevant metadata (i.e., not including metadata related to styling or behavior). For example, the metadata can include the placeholder of the field, the class name, the HTML ID, etc. In certain embodiments, one or more specifications are manually created by a user on a browser extension such that the one or more specifications are treated as the gold standard by which the information generated by the auto-identifier software is compared. In certain embodiments, the manually-created specification is created in two steps: first, by the browser extension automatically tagging fields with a label and, second, by a user correcting or adding one or more labels to their corresponding field(s) (e.g., using a “drag and drop” graphical user interface). The system uses the auto-identifier software to identify UI elements on the webpage (step 130). The system evaluates the performance of the auto-identifier software with respect to the webpage using the specification (step 140). The system displays diagnostics related to the performance of the auto-identifier software (step 150). In certain embodiments, the displayed diagnostics include the number of fields evaluated, the number of fields correctly or incorrectly identified (e.g., specification shows seven fields marked 1-7, but auto-identifier software identifies only six fields 1-6), the number of fields correctly or incorrectly filled (e.g., specification shows seven fields marked 1-7 and filled with a-g, auto-identifier software identifies seven fields marked 1-7, but field 3 is filled with “m” instead of “c”), and the number of fields correctly or incorrectly ignored, etc.

[0021] In certain embodiments, as discussed in greater detail in Section 2, the UI elements are fields, and the auto-identifier software is designed to automatically fill in fields in a webform. In certain embodiments, the webform is a checkout page. In certain embodiments, the specification for the webform includes a mapping of fields on the webform to normalized field labels. In certain embodiments, evaluating the performance of the auto-identifier software includes determining whether the auto-identifier software correctly identified and correctly filled the fields on the webform that the auto-identifier software is tasked with auto-filling and correctly ignored the fields on the webform that the auto-identifier software is not tasked with auto-filling.

[0022] In certain embodiments, as discussed in greater detail in Section 3, the UI elements are text markers, and the auto-identifier software is designed to automatically scrape checkout cart data from a webpage. In certain embodiments, the specification includes a mapping of cart data on the webpage to normalized labels.

[0023] In certain embodiments, displaying diagnostics includes displaying statistics regarding the performance of the autofill software on the webform. In certain embodiments, displaying diagnostics includes displaying statistics related to the performance of the software for a select UI element across a plurality of webpages. For example, the displayed statistics may be related to the percentage of correctly and incorrectly identified fields, correctly and incorrectly filled fields, and correctly and incorrectly ignored fields on the webform.

[0024] In certain embodiments, enabling a user to tag UI elements on a webpage includes providing a browser extension for a web browser that enables a user to tag UI elements on a webpage. In certain embodiments, the browser extension includes code that first automatically tags select UI elements with labels and then enables the user to edit the labels and tag additional UI elements.

2. Method for Testing the Accuracy of Autofill Software on a Webform

[0025] FIG. 2 illustrates a method for testing the accuracy of autofill software on a webform. The system enables a user to tag fields on a webform with labels (step 210). In certain embodiments, the webform may be a checkout page. The system creates a normalized specification for the webform that includes a mapping of fields to normalized labels (step 220). In certain embodiments, a specification is a representation of all possible fillable elements on a webpage plus relevant metadata related to making those elements fillable, minus any metadata from the webpage that is not related to making the elements fillable (including styling or behavior related metadata). The system uses the autofill software to auto-complete fields on the webform (step 230). For a checkout page, the fields may include: username, shipping address, billing address, payment information, etc. Dummy information may be used for testing purposes. Dummy information is any information that was created for testing purposes and does not correspond to an actual system user. The system evaluates the performance of the auto-fill software on the webform using the specification for the webform (step 240). This includes identifying the inputs necessary in the evaluation, such as the set of webforms, the corresponding specifications, and the version of the auto-fill software for testing. Evaluation also includes determining whether the autofill software correctly recognized fields it is tasked to fill and correctly ignored fields it is not tasked to fill. The system displays diagnostics related to the performance of the autofill software (step 250). In certain embodiments, the evaluation and, hence, the diagnostics may be with respect to the webform as a whole and/or with respect to performance of the autofill software for a field across multiple webforms.

3. Method for Testing the Accuracy of Cart-Scraper Software on a Checkout Page

[0026] FIG. 3 illustrates a method for testing the accuracy of cart-scraper software on a checkout page. The system enables a user to tag text markers on a checkout page with labels (step 310). The labeled text markers relate to checkout cart data, such as markers related to product name, product URL, product image, quantity, item price, subtotal price, shipping cost, tax, and total price. The system creates a normalized specification for the checkout page that includes a mapping of text markers to normalized labels (step 320). The system uses the cart-scraper software to scrape cart data from the checkout page (step 330). The cart data may include product name, product URL, product image, quantity, item price, subtotal price, shipping cost, tax, and total price. The system evaluates the performance of the cart-scraper software on the checkout page using the specification for the checkout page (step 340). This includes identifying the inputs necessary in the evaluation, such as the set of webforms, the corresponding specifications, and the version of the cart-scraper software for testing. Evaluation also includes determining whether the cart-scraper software scraped the cart data it is tasked to scrape and ignored the data it is tasked to ignore. The system displays diagnostics related to the performance of the cart-scraper software (step 350). In certain embodiments, the evaluation and, hence, the diagnostics may be with respect to the checkout page as a whole and/or with respect to performance of the cart-scraper software for a particular text marker across multiple checkout pages.

4. Example System Architecture

[0027] FIG. 4 illustrates an example architecture for a system that performs the methods described herein. However, the methods described herein may be implemented in other systems and are not limited to the illustrated system.

[0028] FIG. 4 illustrates two independent processes. The first process is to create one or more manual specifications. The second process is to use a benchmark testing module (also referred to as a “benchmarker”) to check the accuracy of software by comparing it to a manually-created specification downloaded from cloud storage. With respect to the first process, a user uses a browser extension/label tool 410 on a client application 420 on a client device to manually create one or more specifications based on the UI elements in a webpage. The one or more manually-created specifications are initially stored on the client device and then uploaded to cloud storage 430 (e.g., AMAZON WEB SERVICES), where each manually-created specification is tagged with the name of a merchant. During the second process, a manually-created specification is downloaded from the cloud storage 430 and compared to a specification generated from the auto-identifier software.

[0029] The second process takes place on a server 440, which has a server API 450 that downloads the manually-created specification to a benchmark testing module 460. The benchmark testing module 460 also receives a specification generated from the auto-identifier software 470 that is stored in memory 480 on the server 440. The auto-identifier software 470 copies the way the webpage works and attempts to create a specification based on the webpage. The benchmark testing module 460 compares the specification generated from the auto-identifier software against the manually-created specification, which is considered the gold standard specification, and provides diagnostic data via the diagnostic module 490. In certain embodiments, the diagnostic data includes which specifications generated from the auto-identifier software did not match a manually-created specification, and of those that did not match, which fields were not identified correctly.

5. Example Screenshots of User Interface for how to Create a Specification

[0030] FIGS. 5A-5K illustrate screenshots of an exemplary user interface for how to create a specification according to the present invention. A person skilled in the art would understand that the present invention may be embodied in other user interfaces having more or less functionality within the scope of the present invention. As such, FIGS. 5A-5K are intended to be illustrative and not limiting in any way.

[0031] In FIG. 5A, the system provides a user interface that enables a user to select the language of the website for which the user is creating a specification. In the present example, the user selects English as the language of the website. In FIG. 5B, the user drags and drops a parameter to a field on the user interface. As seen in FIG. 5C, the parameter “ContactDetails.Emails.Email.Address” has been dragged and dropped into the field “Email Address.”

[0032] The next step is to add labels to the field. This can be done either by highlighting the label of the input field and allowing the system to capture the label or by manually inputting the label. As illustrated in FIGS. 5D and 5E, the user highlights the label of the input field (i.e., “Email Address”) and confirms that the system should capture the label. As illustrated in FIGS. 5F and 5G, the user instead selects the option to manually input the label. As seen in FIG. 5G, a popup alert block appears as an overlay to the user interface and requests that the user input the name of the label. The user then inputs the name of the label and confirm the label. Once the system has received the label for the input field through either of the above methods, the user interface indicates that the field is a “spec field” by displaying the input field box in a green color with the parameter name and label as shown in FIG. 5H.

[0033] As seen in FIG. 5I, the user then repeats the above steps of dragging and dropping parameters and labeling fields for all fillable fields in the form, such that, once the entire form is completed, the form is considered a completed “spec” form. As seen in FIGS. 5J and 5K, once the form is a completed “spec” form, the user uploads the completed specification to a cloud storage and receives a confirmation that the upload was successful. The system also enables the user to make changes to a completed specification by uploading and overwriting a previous specification.

6. Example Screenshots of User Interface for how to Test Changes Using the Benchmarker

[0034] FIGS. 6A-6D illustrate screenshots of an exemplary user interface for how to test changes using the benchmarker according to the present invention. A person skilled in the art would understand that the present invention may be embodied in other user interfaces having more or less functionality within the scope of the present invention. As such, FIGS. 6A-6D are intended to be illustrative and not limiting in any way.

[0035] In FIG. 6A, the user is preparing a new run of the benchmarker, which is a tool that performs a comparison between the “master” (i.e., manually-created specification) and the “benchmarker-flow-example-branch” (i.e., specification generated from the auto-identifier software) to determine whether there are any differences in the forms. The user inputs the parameters for the benchmark run, in this case, requesting all specifications in the Japanese language (i.e., “-lang ja”). As seen in FIG. 6B, the user specifies that the benchmark run be performed on two branches, the master branch and the benchmarker-flow-example branch, where the three fields, benchmarker, middleware, and widget, represent the three different directories in the code base for which changes can be made.

[0036] As seen in FIG. 6C, after confirming that the benchmark run should begin, the system runs the benchmark to compute the accuracy of the Japanese specification on the master branch and the benchmarker-flow-example-branch, and outputs the results. In this case, the accuracy of the benchmarker-flow-example-branch is lower than the master branch. As a result, the user may want to compare the two benchmark runs by clicking the compare option and make any necessary corrections.

[0037] FIG. 6D illustrates the differences between the two benchmark runs in terms of their mapping results, with the master branch benchmark run in the left column and the benchmarker-flow-example-branch benchmark run in the right column. Each row represents a unique field and a comparison of the mapping between the two branches. For example, for the parameter “ContactDetails.Emails.Email.Address,” the master branch benchmark run mapped the field correctly as shown in green, whereas the benchmarker-flow-example-branch benchmark run mapped the field incorrectly as shown in red. The comparison process enables the user to determine whether any changes to an autofill software results in a net positive or net negative to the overall mapping accuracy.

7. General

[0038] The methods described with respect to FIGS. 1-6D are embodied in software and performed by a computer system (comprising one or more computing devices) executing the software. A person skilled in the art would understand that a computer system has one or more memory units, disks, or other physical, computer-readable storage media for storing software instructions, as well as one or more processors for executing the software instructions.

[0039] As will be understood by those familiar with the art, the invention may be embodied in other specific forms without departing from the spirit or essential characteristics thereof. Accordingly, the above disclosure is intended to be illustrative, but not limiting, of the scope of the invention, which is set forth in the following claims.