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

protractor-base-page

v0.0.4

Published

A base object to give structure describing a page, selectors, steps. Additionally some helper functions are included

Downloads

2

Readme

protractor-base-page

##Summary A base class for protractor page objects that adds structure and a few helpers to write steps faster

##Page Structure The base page object has a few properties for easy consistency across page object.

  • route - string representing the url path after the hostname ex "/login", "?q=something"
  • sels - the selector object created with the first argument in page.construct() { remember_me: {model: 'login.remember_me'}, submit : {buttonText: 'submit'}, username: {id: 'username'}, password: {id: 'password'}, /* etc. etc. */ other_element: {strategy: selector} }
  • steps - describe repeatable actions that you want to take against this page. You can add you step functions directly to page.steps.functionName after page.construct()

##Available Helper Functions

construct: function(sels, route)

  • sels - Object describing the names and locators for elements you want to use on this page
  • route - Either an empty string or the path after the hostname
  • Returns the page object with route and selectors added to the base page

get: function(waitFor, timeout)

  • waitFor - Optional element() to wait for after doing page.get(this.route)
  • timeout - Integer in ms to wait for the above

title: function()

  • Returns the title of the page

currentUrl: function()

  • Returns the URL of the page

element: function(selName)

Uses protractor-specifid binding functions to get element

  • selName - String name for the element in the sels object
  • Returns the element at selName's locator

elements: function(selName)

Uses protractor-specifid binding functions to get elements

  • selName - String name for the element in the sels object
  • Returns the elements at selName's locator

velement: function(selName)

Uses vanilla webdriver binding functions to get element

  • selName - String name for the element in the sels object
  • Returns the element at selName's locator

velements: function(selName)

Uses vanilla webdriver binding functions to get elements

  • selName - String name for the element in the sels object
  • Returns the element at selName's locator

waitForElementText: function (selName, text, timeout)

  • selName - String name for the element in the sels object
  • text - Strings that the element will wait to have
  • timeout - Integer in ms to wait for the above

waitForElementVisible: function (selName, timeout)

  • selName - String name for the element in the sels object
  • timeout - Integer in ms to wait for the above

waitForElementClickable: function (selName, timeout)

  • selName - String name for the element in the sels object
  • timeout - Integer in ms to wait for the above

waitForElementSelected: function (selName, timeout)

  • selName - String name for the element in the sels object
  • timeout - Integer in ms to wait for the above

waitForElementValue: function (selName, value, timeout)

  • selName - String name for the element in the sels object
  • value - Value property that the element will wait to have
  • timeout - Integer in ms to wait for the above

isElementPresent: function (selName)

  • selName - String name for the element in the sels object

##Code Examples ###Example page object, pages/login.page.js //set the page route (or use an empty string if desired) var route = '/login';

//name your elements and describe how to find them
var selectors =  {
    remember_me: {id: 'remember_me'},
    submit : {id: '_submit'},
    username: {id: 'username'},
    password: {id: 'password'}
};

//require the base page module, clone a new object to build on top of
var page = require('protractor-base-page').Page();
//add your elements, route to the new page
page.construct(selectors, route);

//add a step. this one used a data argument so you can adapt it to multiple testing scenarios
page.steps.fillLoginForm = function(data){
    browser.wait(page.element('username').isPresent());
    page.element('username').sendKeys(data.username);
    page.element('password').sendKeys(data.password);
};

//export the page you created
module.exports = page;

###Example Suite/Test, tests/login.spec.js //Using Mocha/Chai for test framework, assertions var chai = require('chai'); var chaiAsPromised = require('chai-as-promised'); chai.use(chaiAsPromised); var expect = chai.expect;

//get the page object
var LoginPage = require('./../pages/LoginPage.js');

//create a suite
describe('Users ',function(){
    //create a test
    it('Can log in with valid credentials', function(){
        //go to the page object
        LoginPage.get();
        //run your step with the specified data
        LoginPage.steps.fillLoginForm({
            username: 'someone',
            password: 'abcABC123'
        });
        LoginPage.element('submit').click();
        //assert something
    });
    it('Can't log in with invalid credentials', function(){
        //go to the page object
        LoginPage.get();
        //run your step with the specified data
        LoginPage.steps.fillLoginForm({
            username: 'someotherguy',
            password: 'wrongpassword'
        });
        LoginPage.element('submit').click();
        //assert something else
    });
});