vitalets / autotester

Chrome extension that allows to develop and run automation tests right in browser

Autotester

Autotester is Chrome extension that allows to develop and run automation tests right in browser.
Tests are written in Javascript and can be executed over another tab of the same Chrome or any remote browser.

Tested in:

Contents

• Demo
• Features
• Project status
• Installation
• Getting started
• Usage
• Roadmap
• Contribution
• FAQ
• Links
• License

Demo

Features

• Zero setup
  The setup is just drag-n-drop extension in chrome. No other stuff like Selenium, Node.js or Chromedriver is needed.

• Convenient development
  Developing tests right in browser has some advantages. You can edit tests in first tab and check results in second. You can easily run particular test to debug. You can keep tab open after tests to inspect with devtools.

• Selenium compatible syntax
  Tests syntax is compatible with Selenium Javascript API so it can be executed ether in nodejs and visa-versa (except custom commands).

• Custom commands
  Because tests are executed via extension all of rich chrome extensions API are available. You can define custom commands to work with cookies, downloads, tabs, history etc and use it in your tests.

• Capture network requests
  Capturing network requests is working out of box. You can capture page loads, resources (img, script, etc), xhr/fetch requests and new tabs. No proxy needed. Please see example.

• Load tests from anywhere
  Tests can be stored right in browser, local directory or loaded from any local/remote http server (for example GitHub).

• Run tests on remote servers
  Besides running tests in the same chrome instance it is possible to route commands to any selenium server. It can be localhost, Sauce Labs, BrowserStack, etc.

• Test other chrome extensions
  With Autotester it is possible to attach to other extensions background pages for testing. Please see example.

Project status

Autotester is under active development now. Not all webdriver commands are supported. Yet. And there can be bugs. But feel free to try it and share your feedback or ideas in issues - help us to make it better!

Installation

1. Download and unpack latest autotester.zip
2. Drag-n-drop unpacked autotester directory on chrome://extensions page

Getting started

Click extension button A in browser panel to open Autotester app. Select google_search in dropdown and press Run to execute test. Look at the report. Next, you can change test code or create new file and re-run again.

Usage

Autotester supports Selenium Javascript API for writing tests. Have a look on Autotester self tests.
Also there are some pre-defined globals available in tests for conveniency:

• Driver
• By
• until
• Key
• webdriver
• console
• require

More detailed tutorial is coming..

How does Autotester work?

When executing tests in the another tab of the same browser Autotester is utilizing Chrome Debugging Protocol available via chrome.debugger.* extensions API. It intercepts http requests going from Selenium Javascript package to W3C Webdriver endpoints and loops them back to browser.
When executing tests over remote browser Autotester does not intercept http requests letting them reach remote Selenium Server and waits for the results.

Roadmap

There are many directions to grow. The current plan is following:

• implement rest of webdriver commands
• improve docs and tutorials
• add capabilities manager to visually configure targets
• integrate with other webdriver implementations (webdriverio, nightwatchjs, codeceptJS, spectron)
• integrate with Appium
• run tests in parallel
• improve tests editor: autocomplete, breakpoints, etc
• create tests automatically via recording user actions
• ...your idea?

Contribution

If you have an idea how to fix bug or implement new feature - you are welcome to contribute.
Please see CONTRIBUTING.md. Thanks for your support!

FAQ

What if I get error "Unsupported route command"?

This error means that some Webdriver command is not implemented in Autotester yet. The workaround sometimes can be using `driver.executeScript` to achive the goal directly. For example, if `driver.getTitle()` is not implemented, you can retrieve title as:

 driver.executeScript(() => document.title);

Also please search issues for the same unsupported route and vote or create new one to let us know which commands you need most of all.

Where to store tests?

1. You can create as many tests as you like and store them right in browser as snippets. This is the easiest way but less reliable: if you occasionally remove extension tests will be lost.
2. For more serious things it is recommended to serve tests from local or remote http server and keep them under version control.
3. The third option is to load tests from local directory without http server. For that you should create tests inside /tests directory of unpacked extension.

Links

• Selenium Javascript API
• W3C Webdriver
• Chrome Debugger Protocol
• Awesome Javascript Test Automation
• Awesome Selenium

License

MIT @ Vitaliy Potapov

autotester's Issues

Examples for Loading Test From Remote Server

First of all, this a great project!

I just need more examples/guides on how to further develop this project. Especially for loading test cases from a remote server.

Also, as you determined in your roadmap if you can implement more Selenium Webdriver API functionality that will be awesome!

Looking forward to hearing from you!

Thank you!

Поддержка webdriver.io

Когда планируете внедрить?

Images

By.xpath

Why i cannot use xpath in the script?
driver.findElement(By.xpath("xxx")).click();

WebDriverError: Unsupported strategy xpath

how to use promise?

Hello, i need your help!
I'm use autotester as chrome extension. Try to run this code -

promise.filter(el, function(res) {
console.log(res, arguments);
});
and have got error - ReferenceError: promise is not defined

does support this plugin promise?

need more examples

We need several examples.
Because now it's not very obvious how to write them.

TimeOut

I'm really new to selenium.
My script works but breaks with an error after a while:
timeout of 30000ms exceeded. Ensure the done() callback is being called in this test.
I tried to search for different ways, but it looks like that done(); callback is not supported?
How can I increase the amount of 30000ms for timeout?

Here is an example of my script:

test.describe('Tests dataset', function () {
  var driver;

  test.before(function () {
    driver = new Driver();
  });

  test.after(function () {
    driver.quit();
  });

  test.it('should return may 2017', function () {
    var artist = ["A Great Big World"];
    for (var i = 0; i < 844; i++) {
    driver.get('http://example.com');
    driver.sleep(1000);
    driver.findElement(By.id("search_value_first")).sendKeys(artist[i] + Key.ENTER);
	driver.sleep(3000);
    var title = driver.findElement(By.className("header_title")).getText().then(function (title) {
    console.log(title);
});
    var text = driver.findElement(By.className("dataset")).getText().then(function (text) {
    console.log(text);
});
    
   }
 
 

  });
});

`elementIsEnabled` isn't working for me

I am new in Selenium, maybe I'm doing smth wrong.

I try use elementIsEnabled from http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html:

    driver.get(URL.searchPage);
    driver.wait(until.elementLocated(CSS.searchFormOpenButton));

    const searchFormOpenButton = driver.findElement(CSS.searchFormOpenButton);
    driver.wait(until.elementIsEnabled(searchFormOpenButton));
    searchFormOpenButton.sendKeys(Key.ENTER);

    driver.sleep(2000);

Autotester says me:

WebDriverError: Unsupported route command: GET /session/loopback/element/197/enabled
    at Object.throwDecodedError (core/background/bundle.js:17123:12)
    at parseHttpResponse (core/background/bundle.js:16323:16)
    at doSend.then.response (core/background/bundle.js:16265:12)
From: Task: WebElement.isEnabled()
    at mixin.schedule (core/background/bundle.js:18207:18)
    at WebElementPromise.schedule_ (core/background/bundle.js:19616:26)
    at WebElementPromise.isEnabled (core/background/bundle.js:19917:18)
    at core/background/bundle.js:31623:21
    at core/background/bundle.js:18546:15
    at TaskQueue.execute_ (core/background/bundle.js:5807:15)
    at TaskQueue.executeNext_ (core/background/bundle.js:5790:22)
    at asyncRun (core/background/bundle.js:5707:26)
    at core/background/bundle.js:3715:8
From: Task: <anonymous>
    at pollCondition (core/background/bundle.js:5242:17)
    at core/background/bundle.js:5238:10
    at new ManagedPromise (core/background/bundle.js:4093:8)
    at core/background/bundle.js:5237:15
    at TaskQueue.execute_ (core/background/bundle.js:5807:15)
    at TaskQueue.executeNext_ (core/background/bundle.js:5790:22)
    at asyncRun (core/background/bundle.js:5660:28)
    at core/background/bundle.js:3715:8
From: Task: Waiting until element is enabled
    at ControlFlow.wait (core/background/bundle.js:5235:18)
    at mixin.wait (core/background/bundle.js:18542:30)
    at Context.<anonymous> (runtime/new_file_1:25:12)
    at core/background/bundle.js:33289:20
    at new ManagedPromise (core/background/bundle.js:4093:8)
    at controlFlowExecute (core/background/bundle.js:33274:15)
    at TaskQueue.execute_ (core/background/bundle.js:5807:15)
    at TaskQueue.executeNext_ (core/background/bundle.js:5790:22)
    at asyncRun (core/background/bundle.js:5707:26)
    at core/background/bundle.js:3715:8
From: Task: new_file_1 should pass
    at Context.ret (core/background/bundle.js:33273:11)

integrate as panel in devtools

On latest Ya.Subbotnik there was a request to see dynamic test results while test are running.
You said that you can see test results while it running in tab, but test will be slowdown by chrome, since it running in not active tab.
One proposed solution was to use separate instance of chrome.
Another possible solution is to integrate dynamic report as panel in chrome devtools, so it will not affect visibility of current tab.

How to use this project in my own chrome extension??

Hello, I want to use this project in my own chrome extension,
I have already include this two files in my

<script src="js/background/bundle.js"></script>
<script src="js/background/boot.js"></script>
<script src="js/background/mocha.js"></script>

I extract the file in one place, I don't know how to integrate the code so I want to include only code maybe like this with jquery:

 $('#send_button').click(function(){
     var driver;

  test.before(function () {
    driver = new Driver();
  });

  test.after(function () {
    driver.quit();
  });

  test.it('should append query to title', function() {
    driver.get('http://www.google.com');
    driver.findElement(By.name('q')).sendKeys('kitten');
    driver.sleep(1000);
    driver.findElement(By.name('q')).sendKeys(Key.ENTER);
    driver.wait(until.titleContains('kitten'), 2000);
    driver.sleep(1000);
  });
test.run();//maybe this code I want to run right way in my button

// I want to test.run() or something so in my extension I can automate right way..
});

So I don't want to use the editor, and how to execute right way to execute command ???
I know the code use react, but how to integrate with other project..

sendKeys открывает вкладку со справкой о браузере

Chrome 63