How to read locators from a json file in protractor? - protractor

Question

I want to develop a framework where i keep all the locators at one place, in a json file say test.json. like this.
{
"yourName": "by.model('yourName')"
}
And I want to read this in specs as below.
var test = require('./test.json');
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
var webElement = element(testtest.yourName);
webElement.sendKeys('write first protractor test');
});
});
but when i do this getting error as Failed: Invalid locator with following error trace.
Failures:
1) angularjs homepage todo list should add a todo
Message:
Failed: Invalid locator
Stack:
TypeError: Invalid locator
at Object.check [as checkedLocator] (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\by.js:267:9)
at WebDriver.findElements (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\webdriver.js:919:18)
at C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\built\element.js:159:44
at ManagedPromise.invokeCallback_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1379:14)
at TaskQueue.execute_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2775:27)
at C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:639:7
at process._tickCallback (internal/process/next_tick.js:103:7)Error
at ElementArrayFinder.applyAction_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\built\element.js:396:27)
at ElementArrayFinder._this.(anonymous function) [as sendKeys] (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\built\element.js:99:30)
at ElementFinder.(anonymous function) [as sendKeys] (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\built\element.js:730:22)
at Object.<anonymous> (E:\ui\TestTest\todo-spec.js:9:20)
at C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\jasminewd2\index.js:94:23
at new ManagedPromise (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1082:7)
at controlFlowExecute (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\jasminewd2\index.js:80:18)
at TaskQueue.execute_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2820:25)
From: Task: Run it("should add a todo") in control flow
at Object.<anonymous> (C:\Users\karunakaralchala\AppData\Roaming\npm\node_modules\protractor\node_modules\jasminewd2\index.js:79:14)
From asynchronous test:
Error
at Suite.<anonymous> (E:\ui\TestTest\todo-spec.js:4:7)
at Object.<anonymous> (E:\ui\TestTest\todo-spec.js:3:5)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
Is there any better way to do this? or what should i need to make it work?

Answer 1

Probably not the direct answer to the question, but I think you are not attempting the problem in a traditional way and sort of partially reinventing the wheel.
Instead of keeping locators in a separate JSON structure, organize them into Page Objects - separate page objects (including element locators and methods to interact with a page) for separate pages or parts of pages.

Answer 2

This should work.
test.json
{
"siteURL": "https://angularjs.org",
"locators": {
"todoText": {
"model": "todoList.todoText"
}
}
}
spec.js
var test = require('./test.json');
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get(test.siteURL);
var webElement = element(by.model(test.locators.todoText.model));
webElement.sendKeys('write first protractor test');
});
});
One complete example using BDD Cucumber, json and pageobject model here. https://github.com/aluzardo/protractor-cucumber-tests/

Answer 3

One simple mistake in your approach.
The values from JSON are read as string and you are passing a string to element() and not a locator(not a by object)
var webElement = element(test.yourName); // Incorrect. test.yourName returns string
Change it way and voila ! You should be good. Use eval(). Refer here
var webElement = element(eval(test.yourName));