npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@progress/kendo-e2e

v4.1.0

Published

Kendo UI end-to-end test utilities.

Downloads

19,057

Readme

Kendo UI Logo

Professional Grade UI Components

This package is part of the Kendo UI for Angular and KendoReact suites.

License

This is commercial software. To use it, you need to agree to the Telerik End User License Agreement for Kendo UI (for Kendo UI for Angular) or to the End User License Agreement for Progress KendoReact (for KendoReact). If you do not own a commercial license, this file shall be governed by the trial license terms.

All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.

Kendo UI for Angular Resources and Feedback

KendoReact Resources and Feedback

Copyright © 2021 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.

kendo-e2e

Selenium based e2e testing for web.

Usage

Setup Browser Drivers

This framework does not manage browser drivers, so the user should take care appropriate driver to be in PATH.

Linux and macOS

Install drivers globally:

npm i -g chromedriver
npm i -g geckodriver

Notes:

  • safaridriver is build-in in macOS so no need to install extra packages.
  • No need to add something in the PATH (scripts of global npm packages are already in the PATH).

Windows

Install drivers globally:

npm i -g chromedriver
npm i -g geckodriver
npm i -g msedgedriver

Add following to your PATH:

  • %APPDATA%\npm\node_modules\chromedriver\lib\chromedriver
  • %APPDATA%\npm\node_modules\msedgedriver\lib\msedgedriver
  • %APPDATA%\npm\node_modules\geckodriver

Notes (applicable for all OSs)

  • Repeat npm i -g chromedriver each time when browser on your machine time is updated
  • Repeat npm i -g chromedriver when changing NodeJS version with nvm

Managing browsers

Example:

    const browser = new Browser();
    await browser.navigateTo("https://www.telerik.com/")
    await browser.close();

By default it will start Chrome browser with size 1366x768.

Browser type and size can be controlled by settings following environment variables:

  • BROWSER_NAME

    Allowed values are chrome, firefox, MicrosoftEdge and safari (default is chrome).

  • BROWSER_WIDTH and BROWSER_HEIGHT

    Default values are 1366 and 768.

  • HEADLESS

    If set to true it will start browsers in headless mode (default is false).

    Notes: Safari do not support headless mode and this setting will be ignored.

Testing on Real Mobile Devices @BrowserStack

Testing on mobile devices is also important, but usually it is hard to do it locally because:

  • Mobile devices are expensive
  • Local labs do not work well in case employees are distributed

That is why we implemented BrowserStack support.

Running tests on BrowserStack is similar to ruining them locally, we just need to tell what device and capabilities we need.

Configuration happens via environment variables:

export BROWSER_NAME=remote
export BS_USER_NAME=<your browser stack user id>
export BS_ACCESS_KEY=<your browser stack access key>
export BS_BROWSER_NAME=<Android|iPhone> (default is "Android")
export BS_BROWSER_NAME=<version of the mobile os> (default is "10.0")
export BS_DEVICE_NAME=<name of device> (default is "Google Pixel 4")
export BS_REAL_MOBILE=<true|false> (default is "true")
export BS_LOCAL=<true|false> (default is "false")
export BS_BUILD_NAME=<string> (default is "BStack Test")
export BS_BUILD_NUMBER=<string> (default is "BStack Build 1")

To check available mobile devices and capabilities please visit this page.

Find Elements and Wait for Conditions

Selenium default behavior when you search for element is to return it if available and throw if not available (do not try to wait until element is available).

To make writing e2e tests easier and tests more stable in kendo-e2e we have:

    const element = await browser.find(locator, timeout);

This find with wait until element is available (until timeout reached), if timeout reached and element still not found it will throw.

Detect JavaScript errors in Browser Logs

    await browser.getErrorLogs()

Will return all errors in browser console and it is nice check we can perform after each test to ensure we have no missing resources or scripts throwing errors.

Detect Accessibility Violations

    const disableRules = ['aria-allowed-role', 'label'];
    const errors = await browser.getAccessibilityViolations('#table', disableRules);
    expect(errors).toEqual([]);

getAccessibilityViolations uses axe to detect WCAG 2.1 violations.

Kendo UI Components Abstractions

TODO

Contribution

PRs are welcome!

Lint:

npm run lint

Build:

npm run build

Run tests:

npm run test:a11y
npm run test:e2e
npm run test:visual
npm run test:components
npm run test:rendering
npm run test:snapshot