webdriverio / recorder-extension Goto Github PK

View Code? Open in Web Editor NEW

9.0 9.0 4.0 892 KB

WebdriverIO Extension for Devtools that allows you to export tests directly from the Recorder panel.

Home Page: https://webdriver.io

License: MIT License

Shell 32.73% JavaScript 62.48% HTML 4.79%

recorder-extension's Introduction

Next-gen browser and mobile automation test framework for Node.js.

WebdriverIO is a test automation framework, for e2e as well as unit and component testing in the browser, that allows you to run tests based on the WebDriver and WebDriver BiDi as well as Appium automation technology. It provides support for your favorite BDD/TDD test framework and will run your tests locally or in the cloud using Sauce Labs, BrowserStack, TestingBot or LambdaTest.

👩‍💻 👨‍💻 Contributing

Do you like WebdriverIO and want to help make it better? Awesome! Have a look into our Contributor Documentation to get started and find out what contributions can be and how to make them.

Getting started with GitHub Codespaces

To get started, create a codespace for this repository by clicking this 👇

A codespace will open in a web-based version of Visual Studio Code. The dev container is fully configured with the software needed for this project.

Note: Dev containers are an open spec that is supported by GitHub Codespaces and other tools.

Getting started with Gitpod

You can also just click on:

to get a ready-to-use development environment for you to start working on this code base.

If you're looking for issues to help out with, check out the issues labeled "good first pick". You can also reach out to our Matrix Channel if you have questions on where to start contributing.

🏢 WebdriverIO for Enterprise

Available as part of the Tidelift Subscription.

The maintainers of WebdriverIO and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open-source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

📦 Packages

This repository contains some of the core packages of the WebdriverIO project. There are many wonderful curated resources the WebdriverIO community has put together.

Did you build a WebdriverIO service or reporter? That's awesome! Please add it to our configuration wizard and docs (e.g. like in this example commit) as well as to our awesome-webdriverio list. Thank you! 🙏 ❤️

Core

webdriver - A Node.js bindings implementation for the W3C WebDriver and Mobile JSONWire Protocol
webdriverio - Next-gen browser and mobile automation test framework for Node.js
@wdio/cli - A WebdriverIO testrunner command line interface

Helper

@wdio/config - A helper utility to parse and validate WebdriverIO options
@wdio/logger - A helper utility for logging WebdriverIO packages
@wdio/protocols - Utility package providing information about automation protocols
@wdio/repl - A WDIO helper utility to provide a repl interface for WebdriverIO
@wdio/reporter - A WebdriverIO utility to help report all events
@wdio/runner - A WebdriverIO service that runs tests in arbitrary environments
@wdio/utils - A WDIO helper utility to provide several utility functions used across the project
@wdio/globals - A WDIO helper utility for importing global variables directly

Reporter

@wdio/allure-reporter - A WebdriverIO reporter plugin to create Allure Test Reports
@wdio/concise-reporter - A WebdriverIO reporter plugin to create concise test reports
@wdio/dot-reporter - A WebdriverIO plugin to report in dot style
@wdio/junit-reporter - A WebdriverIO reporter that creates test results in XML format
@wdio/spec-reporter - A WebdriverIO plugin to report in spec style
@wdio/sumologic-reporter - A WebdriverIO reporter that sends test results to Sumologic for data analyses

Services

@wdio/appium-service - A WebdriverIO service to start & stop Appium Server
@wdio/browserstack-service - A WebdriverIO service that can be used to use BrowserStack Test Observability which is a reporting, debugging, and test suite quality tracking tool for any test running anywhere. The service also helps for a better integration with the BrowserStack grid if you're running tests on the grid.
@wdio/devtools-service - A WebdriverIO service that allows you to run Chrome DevTools commands in your tests
@wdio/firefox-profile-service - A WebdriverIO service that lets you define your Firefox profile in your wdio.conf.js
@wdio/sauce-service - A WebdriverIO service that provides a better integration into Sauce Labs
@wdio/shared-store-service - A WebdriverIO service to exchange data across processes
@wdio/testingbot-service - A WebdriverIO service that provides a better integration into TestingBot

Runner

@wdio/local-runner - A WebdriverIO runner to run tests locally
@wdio/browser-runner - A WebdriverIO runner to run unit or component tests in the browser

Framework Adapters

@wdio/cucumber-framework - Adapter for Cucumber testing framework
@wdio/jasmine-framework - Adapter for Jasmine testing framework
@wdio/mocha-framework - Adapter for Mocha testing framework.

Others

eslint-plugin-wdio - Eslint rules for WebdriverIO
@wdio/smoke-test-reporter - A WebdriverIO utility to smoke test reporters for internal testing purposes
@wdio/smoke-test-service - A WebdriverIO utility to smoke test services for internal testing purposes
@wdio/webdriver-mock-service - A WebdriverIO service to stub all endpoints for internal testing purposes

🤝 Project Governance

This project is maintained by awesome people following a common set of rules and treating each other with respect and appreciation.

👨‍🍳 👩‍🍳 Backers

Become a backer and show your support for our open-source project.

💸 Sponsors

Does your company use WebdriverIO? Ask your manager or marketing team if your company would be interested in supporting our project. Support will allow the maintainers to dedicate more time to maintenance and new features for everyone. Also, your company's logo will show on GitHub - who doesn't want a little extra exposure? Here's the info.

💎 Premium Sponsor

We are immensely grateful to our exclusive Premium Sponsor for their invaluable support in the development of this project:

🥈 Silver Sponsor

🥉 Bronze Sponsor

📄 License

MIT

🔰 Badge

Show the world you're using webdriver.io →

GitHub markup

[![tested with webdriver.io](https://img.shields.io/badge/tested%20with-webdriver.io-%23ea5906)](https://webdriver.io/)

HTML

<a href="https://webdriver.io/">
    <img alt="WebdriverIO" src="https://img.shields.io/badge/tested%20with-webdriver.io-%23ea5906">
</a>

👏 Supporters

recorder-extension's People

Contributors

Stargazers

Watchers

Forkers

zhaomenghuan jecfish jan-molak seanpoulter

recorder-extension's Issues

Make demo example from `@puppeteer/replay` work

In puppeteer/replay#268 there is currently an example outlined that projects can use for demo purposes. This example doesn't work with this extension for the following reasons:

calling await browser.$("[data-test=Americano]").click() fails as the checkout element overlays the click position, I created an issue in the WebDriver spec suggesting that elements should be scrolled into the center of the view rather than to the end to increase the likelyhood to not run into this situation
~~We currently transform this selector~~
```
"selectors": [
    [
      "aria/Add one Espresso"
    ],
    [
      "#app > div:nth-child(4) > div.pay-container > ul > li:nth-child(2) > div.unit-controller > button:nth-child(1)"
    ]
  ],
```
into the following WebdriverIO selector button=Add one Espresso which translates this WebDriver xPath: .//button[normalize-space() = "Add one Espresso"], unfortunately the button has an aria label and its text is just a + which means that the aria label takes precedence and finding the element by text won't work.

Both issues can be solved by:

always scroll the element into the center of the view via:
```
await browser.execute((elem) => elem.scrollIntoView(), elem)
```
but this would make the test script very verbose and doesn't guarantee it is solved in all occasions.
~~we could make an exemption to use "find by element text" for buttons and just use the CSS selector provided by @puppeteer/replay, unfortunately that selector also doesn't work for us~~

Edit: The second problem was solved by introducing an accessibility name selector to WebdriverIO

Duration is not retrieved

When I use the duration parameter in Chrome Recorder, I'm not able to get this parameter when I export the Webdriver script.

Is there a solution for that?

Regards

Support code view highlight in Recorder

Chrome 110 launches a new "Show code and highlight" feature.

How to test
You can test this feature with the latest Chrome Canary

Open a recording in the Recorder, click "Show code".
Hover over each step, the code should highlight accordingly.

Action required

Your extension needs to update to the latest Puppeteer Replay.
Rebuild & publish a new version to Web Store
That's all!

If your extension doesn't have Puppeteer Replay as dependency, you can implement the [sourcemaps] (https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68) yourself to make it work.

my gif has pretty low res.

Do we need to add step to scroll to off-viewport element before the action?

Steps:

Import this JSON file in Recorder. puppeteer/replay#268
Export it as WebDriverIO script.
Run it with chrome driver.
The script failed at the step: click Americano. [NOT OK]
Element is not clickable at point x y. Other element would receive the click: ...
Repeat step 2 and 3.
Manually scroll down to Americano.
The "click Americano" step run successfully.

Notes:

Follow the side note in the https://webdriver.io/docs/api/element/click.
I am not sure if this is something can be addressed by the auto-generated script or should I manually remove the fixed header menu.

Incorrect window size

Steps:

Import this JSON file in Recorder. puppeteer/replay#268
Export it as WebDriverIO script.
Run it with chrome driver.
Window size open incorrectly [NOT OK]

Expect the window size is as per script 448px.

Notes:

Is that because Chrome Driver only support minimum window size 500px?

`waitForElement` step transform incorrectly

Steps:

Import this JSON file in Recorder. puppeteer/replay#268
Export it as WebDriverIO script.

Observe the step below is transform to

// json
{
  "type": "waitForElement", 
  "selectors": ["div.pay-container li"], 
  "operator": "==", 
  "count": 2
 }
 
 // wdio
 await expect(browser.$("div.pay-container li")).toBeElementsArrayOfSize(2)

Run it with chrome driver. Test is failed. [NOT OK]
Modify the script to browser.$$. Script rerun successfully.

Expect the step transform correctly to $$.

Support copy single step as WebdriverIO script

Chrome 109 launches a new "Copy a single step as script" feature.

How to test

In a recording, right click on a step, select copy as [your extension] script option.

Action required

Your extension needs to implement the stringifyStep API for this feature to work.
You can test this feature with the latest Chrome Canary

Not able to replay KeyUp and KeyDown step

Steps:

Import this JSON file in Recorder. puppeteer/replay#268
Export it as WebDriverIO script.

Observe the step { "type": "keyDown","key": "Escape"} is transform to

 await browser.performActions([{
  type: 'key',
  id: 'keyboard',
  actions: [{ type: 'keyDown', value: 'ESCAPE' }] 
}])

Run it with chromedriver
Receive error invalid argument: 'value' must be a single Unicode code point [NOT OK]
Change the value to \x1B. Step executed successfully.

Expect the keyboard action map to unicode correctly.

Notes:

When the error happen, I tried to search for relevant official documentation, no useful info found.

Search online randomly return some suggests to add a config. Doesn't work either.

'goog:chromeOptions': {
            w3c: true,
        },

Incomplete syntax transform for `browser.waitUntil`

Missing an end bracket during transformation:

{
  "type": "waitForExpression",
  "expression": "document.querySelector('div.pay-container li:nth-child(2) span.unit-desc').innerText === ' x 2'"
}

await browser.waitUntil(() => (
  browser.execute(() => document.querySelector('div.pay-container li:nth-child(2) span.unit-desc').innerText === ' x 2')
)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.