How to execute browser method inside protractor custom locator? - protractor

I want to execute browser method inside the protractor custom locator like:
import {browser} from 'protractor';
protractor.by.addLocator("demo",(selector: string) => {
browser.executeScript('my script')
});
This throws error like:
protractor_1 not defined.
Any help will be valuable.
Add on: Let me know, if we can use async /await inside custom locator.

The problem is CLEARLY NOT in the code you posted.
Somewhere you're using protractor_1, which is not defined. Look for it in your code

You have imported 'browser' but not the actual 'protractor'
import { browser, protractor } from 'protractor';
browser.executeScript cannot be executed in the context of the browser.
"#param {Function|string} script. A script to be run in the context of the browser.
Follow up the documentation: https://www.protractortest.org/#/api?view=ProtractorBy.prototype.addLocator

Related

"Import" doesn't work on the spec file on Cypress

If someone could help me on this please.
I have created page objects with the following code:
class Login {
username(){
return cy.get('#UserName').type('test1')
}
password(){
return cy.get('#password-field').type('test2')
}
loginbtn(){
return cy.get('.btn').click()
}
}
export default Login
Here I have created class Login and imported on the spec file as:
import Login from '../support/PageObjects/Login'
beforeEach('Login to shipment page',() => {
cy.Login()
})
This was working before but now this is not working and I get the error (on hover) telling "Login is declared but it's value is never read." I have changed nothing. I am facing this issue many times but never got the proper solution for this.
The login is not needed to be imported when you have a custom command like cy.Login().
That is why the error occurs:
'Login' is declared but it's value is never read.
Custom commands are global to all tests and never need importing. The Login page is being added to the tests via cy.Login() and you can remove the import without affecting it.
This has to be something to do with your custom command cy.Login(), I imagine the code for it to be something like below:
// cypress/support/commands.js
const login = new require('../PageObjects/Login.js')
Cypress.Commands.add('Login', () => {
login.username()
login.password()
login.loginbtn()
})
Now that of course needs to be imported into cypress/support/e2e.js, but that is the default - check it anyway.
// cypress/support/e2e.js
import './commands.js'
If you are using the Typescript, options are similar.
By the way, what is the file you are having the error from? I suspect that will give a clue.
You have to create an object of the class Login and using that you can access the different methods. So your code should look like this:
import Login from '../support/PageObjects/Login'
const login = new Login()
beforeEach('Login to shipment page', () => {
login.username()
login.password()
login.loginbtn()
})

Specifying window (global) variable type hinting in VSCode from external JS file without typescript

This may be a silly question but I really don't know where to look.
I'm creating a browser testing environment for a pretty large-scale API written in typescript. This API uses esbuild to build the typescript files into a /dist/ folder with a single index.js entry-point and its appropriate d.ts file.
I've created a /tests/ folder to hold some browser files that includes an index.html file with Mocha and Chai imported. It also imports /dist/index.js which is set globally to a window.myAPI variable.
In /tests/index.html:
import * as myAPI from "./dist/index.js"
Alongside index.html in the tests folder, there are separate JS files included for different tests that run things on window.myAPI... to do assertion tests.
search.test.js
book.test.js
navigate.test.js
I then run a server to host at the root. These separate tests are then imported from /tests/index.html. The separate tests look like this inside:
const { chai, mocha } = window;
const { assert } = chai;
describe("Search", function() {
describe("Setup", function() {
it("Setting URL should work", function() {
const call = myAPI.someCall()
assert.ok(call);
});
});
});
mocha.run();
Everything works, but I have no code hinting for myAPI. I'd like to be able to see what functions are available when I type myAPI, and what parameters they take, and what they should return - along with all my comments on each function.
In typescript you can do things like ambient declarations, but I don't want to make my tests typescript because then I add an unnecessary build step to the tests. But it would be as easy as:
/// <reference path = "/dist/index.d.ts" />
How can I tell VSCode that window.myAPI is an import of /dist/index.js and should import the types as well so I can see them ?
I'm open to different solutions to this, but I feel like this should be pretty simple. I don't know if ESLint is capable of doing something like this, but I tagged it because I feel it's relevant.
Thanks!

I couldn't import/require react-component class inside a node_modules package on web development

my code is like:
import Render from './AppeRender';
import { Component } from 'react';
export default class appDB extends Component {
render () {
return Render.call(this, this.props, this.state);
}
}
and what i'm getting is:
Module parse failed: /home/projects/node_modules/DB/Db.js Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
Note: Error only comes in web setup, it's working fine in android and in IOS i haven't tried yet.
Does anyone have any idea regarding this.
I think what is wrong here is that you using import twice (and the second one is a destructure.
Try this instead:
import { Component } from 'react';
import Render from './AppeRender';
You can bind Component in one import.
The second import could have been changed to a straight destructure:
const { Component } = React;
But, there is no reason to do this if you are only using Component.
Using import on an Object is not really correct (however, it might work with some implementations), I assume that is why the error was occurring.

Why is ic-ajax not defined within certain functions in Ember CLI?

Forgive my ignorance, but I can't get ic-ajax working inside of certain
functions.
Specifically, I'd like to get a test like this working, but for Ember CLI:
e.g. http://coderberry.herokuapp.com/testing-your-ember-application#30
I can call ajax inside Ember.Object.Extend and outside of functions and object definitions, but not in modules, tests, or Ember.Route's model function.
Am I misunderstanding something or is there a misconfiguration in my app?
I've figured out that within functions I can do:
ajax = require('ic-ajax')['default'];
defineFixture = require('ic-ajax')['defineFixture'];
but I'm pretty sure import at the top of the file is supposed to work.
I'm experiencing this on Ember 0.40.0 (both in my existing app and a fresh app). See below for more specifics where I'm finding it undefined. Setting var ajax = icAjaxRaw outside of the functions does not work either. I'm at a bit of a loose end so any help you could give in this regard would be great.
users-test.js:
import ajax from 'ic-ajax';
import { raw as icAjaxRaw } from 'ic-ajax';
import { defineFixture as icAjaxDefineFixture } from 'ic-ajax';
debugger;
---> icAjaxDefineFixture IS defined here
module('Users', {
setup: function() {
App = startApp();
debugger;
icAjaxDefineFixture --> UNDEFINED
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
test("Sign in", function() {
icAjaxDefineFixture --> UNDEFINED
expect(1);
visit('/users/sign-in').then(function() {
equal(find('form').length, 1, "Sign in page contains a form");
});
});
Brocfile.js (I don't think these are actually needed with the new ember-cli-ic-ajax addon):
app.import('vendor/ic-ajax/dist/named-amd/main.js', {
exports: {
'ic-ajax': [
'default',
'defineFixture',
'lookupFixture',
'raw',
'request',
]
}
});
Had the same problem. Turns out it is a Chrome debugger optimization issue, checkout this blog post http://johnkpaul.com/blog/2013/04/03/javascript-debugger-surprises/
While debugging, if you try to use a variable from a closure scope in the console, that wasn’t actually used in the source, you’ll be surprised by ReferenceErrors. This is because JavaScript debuggers optimize the hell out of your code and will remove variables from the Lexical Environment of a function if they are unused.
To play around in debugger, I've just typed ajax; inside of the closure and variable magically appeared.

How can I add URL's dynamically to Protractor tests?

I am trying to use protractor in conjunction with Jenkins. In my jenkins, I need to have URLs dynamically generated.
So while running protractor tests, for example:
describe('angularjs homepage', function() {
it('should greet the named user', function() {
// Load the AngularJS homepage.
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('testUser');
});
});
In above example I want to pass a variable dynamically in place of "http://www.angularjs.org".
I could not find any variables that can be specified in the reference config as well.
You can use baseUrl as config parameter inside exports.config and then use browser.get('/path') inside your test spec. So in config you have e.g. baseUrl: 'http://localhost', so browser.get('/path') would call http://localhost/path.
If I understand the question correctly, you are looking for the environmental variable to configure the base url. In that case, since Protractor is built on WebDriver you should be able to set
webdriver.base.url="http://someurl"
Hopefully this is what you are looking for.
It looks like calling browser.baseUrl = "https://test-url.com" does the trick in onPrepare
you must have conf.js or conf.ts file. So, You can set "baseUrl" as part of your conf file under config
// conf.js
exports.config = {
framework: 'jasmine',
specs: ['spec.js'],
baseUrl: 'my-site.com'
}
then call this browser in your test like:
browser.get(browser.baseUrl);
I faced same issue and resolved like this.