Custom browser methods in protractor

Question

I'm working on a typescript protractor skeleton and I would like to add a new click, and sendkeys method that are improved than the original ones, here is what I have come up with for the improved click():

import {browser, by, ElementArrayFinder, ElementFinder, ExpectedConditions, Key} from 'protractor';

const actionTimeout = 5000;


ElementFinder.prototype.secureClick = function () {
    return browser
        .wait(ExpectedConditions.elementToBeClickable(this), actionTimeout)
        .then(() => browser.executeScript('arguments[0].scrollIntoView();', this.getWebElement()))
        .then(() => this.click())
        .catch(err => {
            throw new Error(`Expected ElementFinder ${this.locator()} to be clickable. ${err.toString()}`);
        });
};

Now the problem starts when i want to import this document:

import './secureClick'

export async function myFun() {
await somelocator.secureClick()
}

error msg: .secureClick() is not a function

Can you try using `require(./secureClick')` inside your `onPrepare` in your conf.js. [This answer](https://stackoverflow.com/a/31355283/10836734) seems to indicate that in certain circumstances import can be async where as require is sync — DublinDev, Oct 16 '19 at 08:56
@DublinDev still I get the same error msg:// `Failed: protractor_1.element.all(...).first(...).secureClick is not a function` — Peter Toth, Oct 16 '19 at 11:14

score 1 · Answer 1 · answered Oct 16 '19 at 12:02

This is not an answer as I still am not sure why your having your issue but this approach is working for me and it was too long to write in the comments. I can see it is successfully clicking the button.

Your implementation will obviously look slightly different as you are using the control flow and not async/await

conf.js

exports.config = {
    framework: 'jasmine',
    specs: ['../tests/editing-prototype.js'],
    SELENIUM_PROMISE_MANAGER: false,
    onPrepare: () => {
        let { ElementFinder } = require('protractor');

        ElementFinder.prototype.newClick = function () {
            console.log('new click');
            this.click();
        }
    },
}

editing-prototype.js

describe("Homepage", function() {
    it("Navigate to homepage", async function(){
        await browser.get("http://www.angular.io");
        await browser.driver.sleep(5000);
        await $('.homepage-container a[href="start"]').newClick();
        await browser.driver.sleep(5000);
    });
});

Output

C:\ProtractorProjects\IssueChecker>node_modules\.bin\protractor configs\conf-2.js
[12:58:01] I/launcher - Running 1 instances of WebDriver
[12:58:01] I/local - Starting selenium standalone server...
[12:58:03] I/local - Selenium standalone server started at http://{ip}/wd/hub
Started
new click
.


1 spec, 0 failures
Finished in 11.642 seconds

`- Failed: protractor_1.element(...).newClick is not a function` — Peter Toth, Oct 16 '19 at 13:10
I just hate it when this happens, thanks for the answer anyway, I'll post my solution once I found it — Peter Toth, Oct 16 '19 at 13:10
I just checked this also works with the solution, thank you for your support — Peter Toth, Oct 17 '19 at 11:13

score 0 · Accepted Answer · answered Oct 17 '19 at 11:12

0

The code above is correct, the fault was I did not start protractor with ng, I only tried to run it vanilla. running npm run *folder* solved this issue.

answered Oct 17 '19 at 11:12

Peter Toth

678
6
23

Custom browser methods in protractor

2 Answers2