How to Automate your Chrome Browser Extension App (Browser extension testing)

Ui.Vision HowTo
1

Recently I became the maintainer of some browser extensions. When I became the maintainer I was surprised at the absence of tests in the project and I am looking for option now.

The problem that I run into when attempting to test extensions is having to deal with the WebExtension APIs in tests. The problem is that the environment the tests run in — that is as a webpage in chrome — does not have access to the APIs. The test suites I tried to use throws an error because anything with browser.* will be undefined.

To overcome this issue installed sinon-chrome, a library which enables mocking out these APIs. But even then, I can not fully test the extensions because this tools only mocks the API.

Has anyone tried using the UI.Vision RPA software for Chrome and Firefox extension testing?

2

Testing browser extensions works great with UI.Vision RPA. You can use XDesktopAutomation | true to switch to desktop view to click the extension icon and then use XDesktopAutomation | false for switching the view back to browser mode. Independent of the image recognition, the selenium ide commands can be used as well.

Last but not least, we use UI.Vision ourself for testing our own browser extensions :smiley: I made a short screencast of one of our automated extension test (here for the Copyfish OCR extension):

The test case is:

  • Open Copyfish (click extension icon) with XClick

  • Select OCR input area on the screen (mouse down, select, mouse up) with XMove

  • Click “Copy to clipboard button” with XClick

  • Assert that the correct text is in the clipboard with if/else/endif

      {
    "Name": "copyfish_release_test_12",
    "CreationDate": "2019-3-1",
    "Commands": [
      {
        "Command": "open",
        "Target": "https://a9t9.com/copyfish/welcome?test12",
        "Value": ""
      },
      {
        "Command": "XDesktopAutomation",
        "Target": "true",
        "Value": ""
      },
      {
        "Command": "store",
        "Target": "---",
        "Value": "!clipboard"
      },
      {
        "Command": "XClick",
        "Target": "fish_dpi_96.png",
        "Value": ""
      },
      {
        "Command": "XMove",
        "Target": "s_start_dpi_96.png",
        "Value": "#down"
      },
      {
        "Command": "XMove",
        "Target": "s_end2_dpi_96.png",
        "Value": ""
      },
      {
        "Command": "comment",
        "Target": "reuse the coordinates already found",
        "Value": "#up"
      },
      {
        "Command": "XMove",
        "Target": "${!imagex},${!imagey}",
        "Value": "#up"
      },
      {
        "Command": "XMove",
        "Target": "${!imagex},${!imagey}",
        "Value": "#up"
      },
      {
        "Command": "comment",
        "Target": "Now switch Kantu eyes to browser viewport only",
        "Value": "#up"
      },
      {
        "Command": "XDesktopAutomation",
        "Target": "false",
        "Value": ""
      },
      {
        "Command": "XClick",
        "Target": "copybutton_dpi_96.png",
        "Value": ""
      },
      {
        "Command": "echo",
        "Target": "Text in clipboard is: x${!clipboard}v",
        "Value": ""
      },
      {
        "Command": "if",
        "Target": "\"${!clipboard}\" == \"Getting started with Copyfish\"",
        "Value": ""
      },
      {
        "Command": "echo",
        "Target": "Test passed",
        "Value": "green"
      },
      {
        "Command": "else",
        "Target": "",
        "Value": "green"
      },
      {
        "Command": "throwError",
        "Target": "Test failed. Wrong text in clipboard",
        "Value": ""
      },
      {
        "Command": "endif",
        "Target": "",
        "Value": ""
      }
    ]
  }
1 Like
3

2 posts were split to a new topic: Browser testing: icon not clicked

4

New additional browser extension automation tutorial here: