What is the difference between `expect(something).toBe(true)`, `expect(something).toBeTruthy()` and `expect(something).toBeTrue()`?

Note that `toBeTrue()` is a *custom matcher* introduced in [`jasmine-matchers`][1] among other useful and handy matchers like `toHaveMethod()` or `toBeArrayOfStrings()`.


----------

The question is meant to be generic, but, as a real-world example, I&#39;m testing that an element is displayed in `protractor`. Which matcher should I use in this case?

    expect(elm.isDisplayed()).toBe(true);
    expect(elm.isDisplayed()).toBeTruthy();
    expect(elm.isDisplayed()).toBeTrue();

  [1]: https://github.com/JamieMason/Jasmine-Matchers

toBe(true) vs toBeTruthy() vs toBeTrue()

**The Story:**

Here on StackOverflow, I&#39;ve seen users reporting that they cannot click an element via selenium WebDriver &quot;click&quot; command and can work around it with a JavaScript click by executing a script. 

Example in Python:

    element = driver.find_element_by_id(&quot;myid&quot;)
    driver.execute_script(&quot;arguments[0].click();&quot;, element)

Example in WebDriverJS/Protractor:

    var elm = $(&quot;#myid&quot;);
    browser.executeScript(&quot;arguments[0].click();&quot;, elm.getWebElement());

**The Question:**

Why is clicking &quot;via JavaScript&quot; works when a regular WebDriver click does not? When exactly is this happening and what is the downside of this workaround (if any)?

&lt;sup&gt;I personally used this workaround without fully understanding why I have to do it and what problems it can lead to.&lt;/sup&gt;

WebDriver click() vs JavaScript click()

I am trying to select an option from a drop down for the angular e2e tests using protractor.

Here is the code snippet of the select option:

    &lt;select id=&quot;locregion&quot; class=&quot;create_select ng-pristine ng-invalid ng-invalid-required&quot; required=&quot;&quot; ng-disabled=&quot;organization.id !== undefined&quot; ng-options=&quot;o.id as o.name for o in organizations&quot; ng-model=&quot;organization.parent_id&quot;&gt;
        &lt;option value=&quot;?&quot; selected=&quot;selected&quot;&gt;&lt;/option&gt;
        &lt;option value=&quot;0&quot;&gt;Ranjans Mobile Testing&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;BeaverBox Testing&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;BadgerBox&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;CritterCase&lt;/option&gt;
        &lt;option value=&quot;4&quot;&gt;BoxLox&lt;/option&gt;
        &lt;option value=&quot;5&quot;&gt;BooBoBum&lt;/option&gt;
    &lt;/select&gt;


I have tried:

    ptor.findElement(protractor.By.css(&#39;select option:1&#39;)).click();

**This gives me the following error:**

An invalid or illegal string was specified
Build info: version: &#39;2.35.0&#39;, revision: &#39;c916b9d&#39;, time: &#39;2013-08-12 15:42:01&#39;
System info: os.name: &#39;Mac OS X&#39;, os.arch: &#39;x86_64&#39;, os.version: &#39;10.9&#39;, java.version: &#39;1.6.0_65&#39;
Driver info: driver.version: unknown

I have also tried:

    ptor.findElement(protractor.By.xpath(&#39;/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]&#39;)).click();

**This gives me the following error:**

&gt; ElementNotVisibleError: Element is not currently visible and so may not be interacted with
Command duration or timeout: 9 milliseconds
Build info: version: &#39;2.35.0&#39;, revision: &#39;c916b9d&#39;, time: &#39;2013-08-12 15:42:01&#39;
System info: os.name: &#39;Mac OS X&#39;, os.arch: &#39;x86_64&#39;, os.version: &#39;10.9&#39;, java.version: &#39;1.6.0_65&#39;
Session ID: bdeb8088-d8ad-0f49-aad9-82201c45c63f
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, rotatable=false, locationContextEnabled=true, version=24.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}]


Can anyone please help me with this problem or throw some light on what i might be doing wrong here.




How to select option in drop down protractorjs e2e tests

Should I be using Protractor or Karma for my end-to-end testing? 

Angular-seed is using Protractor/Selenium WebDriver for E2E but the angular-phonecat tutorial uses karma. 

I read that I should use Karma for unit tests and Protractor for E2E, which seems fine but I thought I would ask on here to get other dev&#39;s opinions.



Should I be using Protractor or Karma for my end-to-end testing?

I have a Protractor project which contains such a file:

    var FriendCard = function (card) {
        var webElement = card;
        var menuButton;
        var serialNumber;
    
        this.getAsWebElement = function () {
            return webElement;
        };
    
        this.clickMenuButton = function () {
            menuButton.click();
        };
    
        this.setSerialNumber = function (numberOfElements) {
            serialNumber = numberOfElements + 1;
            menuButton = element(by.xpath(&#39;.//*[@id=\&#39;mCSB_2_container\&#39;]/li[&#39; + serialNumber + &#39;]/ng-include/div/div[2]/i&#39;));
        };
    
        this.deleteFriend = function () {
            element(by.css(&#39;[ng-click=&quot;deleteFriend(person);&quot;]&#39;)).click();
            element(by.css(&#39;[ng-click=&quot;confirm()&quot;]&#39;)).click();
        }
    };
    module.exports = FriendCard;

Path to the file is `./pages/FriendCard.js`.

I have no problems with its import to another file using `require()`:

    var FriendCard = require(&#39;./../pages/FriendCard&#39;);

So, I&#39;ve decided to import this file to the TypeScript file just like that: 

    import {FriendCard} from &#39;./../pages/FriendCard&#39;

I&#39;m using WebStorm. It tells me that (**TS2305**) it has no exported member &#39;FriendCard&#39;. 

Maybe I have to configure tsconfig.json file somehow, but I still don&#39;t know how it works. Could you help me? 

How to import js-modules into TypeScript file?

I&#39;m trying to test if an element is visible using protractor. Here&#39;s what the element looks like:

    &lt;i class=&quot;icon-spinner icon-spin ng-hide&quot; ng-show=&quot;saving&quot;&gt;&lt;/i&gt;

When in the chrome console, I can use this jQuery selector to test if the element is visible:

    $(&#39;[ng-show=saving].icon-spin&#39;)
    [
    &lt;i class=​&quot;icon-spinner icon-spin ng-hide&quot; ng-show=​&quot;saving&quot;&gt;​&lt;/i&gt;​
    ]
    &gt; $(&#39;[ng-show=saving].icon-spin:visible&#39;)
    []

However, when I try to do the same in protractor, I get this error at runtime:

    InvalidElementStateError: 
    invalid element state: Failed to execute &#39;querySelectorAll&#39; on &#39;Document&#39;: 
    &#39;[ng-show=saving].icon-spin:visible&#39; is not a valid selector.

Why is this not valid? How can I check for visibility using protractor?



How to use protractor to check if an element is visible?

In the documentation for protractor, I see the following example:

    describe(&#39;by model&#39;, function() {
      it(&#39;should find an element by text input model&#39;, function() {
        var username = element(by.model(&#39;username&#39;));
        username.clear();
        username.sendKeys(&#39;Jane Doe&#39;);
    
        var name = element(by.binding(&#39;username&#39;));
    
        expect(name.getText()).toEqual(&#39;Jane Doe&#39;);
      });

What appears clear here is that you can use &quot;by.model&quot; to set values in an input box, but if you want to look at an input box and see what&#39;s in it, you need to use &quot;by.binding&quot;.

I have a set of code where (in summary) I do:

    element(by.model(&#39;risk.name&#39;)).sendKeys(&#39;A value&#39;);
    expect(element(by.model(&#39;risk.name&#39;)).getText()).toEqual(&#39;A value&#39;);

(in my real code I save the entity then come back to it in edit mode, and I&#39;m checking my value was actually saved.  But it still boils down to the same thing, and this sample code gives the same problem).

This gives me an error:

    Error: Expected &#39;&#39; to equal &#39;A value&#39;.

In theory, following the example from the docs, I can instead do:

    element(by.model(&#39;risk.name&#39;)).sendKeys(&#39;A value&#39;);
    expect(element(by.binding(&#39;risk.name)).getText()).toEqual(&#39;A value&#39;);

But the by.binding doesn&#39;t appear to like the fully qualified model, I get an error:  

    Error: No element found using locator: by.binding(&quot;risk.name&quot;)

It does work (after a fashion) if I do:

    element(by.model(&#39;risk.name&#39;)).sendKeys(&#39;A value&#39;);
    expect(element(by.binding(&#39;name&#39;)).getText()).toEqual(&#39;A value&#39;);

This finds an element, but also gives a warning that I have more than one element that matches &#39;name&#39;.  And unfortunately the one it picks isn&#39;t the right one.  

So, two questions:

1. Should the by.model be able to return a getText(), or is there a design decision that it not do that and we need to use by.binding instead?
2. Should I be able to use a fully qualified entity in the by.binding, or is there a design decision that by.binding doesn&#39;t like the full model name?  If so, what other qualifier can I use to select between my different bindings?

EDIT:

I have also tried the solution suggested by vdrulerz, I modified the code as follows:

    element(by.model(&#39;risk.name&#39;)).getText().then(function(text) {
      console.log(text);
      expect(text).toEqual(&#39;A risk name&#39;);  
    });

The console.log is returning a blank value (not a promise or an object), and the expect fails giving the message:

    Expected &#39;&#39; to equal &#39;A risk name&#39;.

My understanding is that protractor already patches the expect to deal with the promise, so I feel that the underlying problem is the getText not working on a field identified via a model (I can successfully getText on labels and other widgets).

I can also run the following code, using getAttribute rather than getText():

    expect(element(by.model(&#39;risk.name&#39;)).getAttribute(&#39;autofocus&#39;)).toEqual(&#39;true&#39;);
    element(by.model(&#39;risk.name&#39;)).getAttribute(&#39;autofocus&#39;).then(function(text) {
      console.log(text);
      expect(text).toEqual(&#39;true&#39;);  
    });

The first part passes - the expect works.  The second part also works, suggesting that vdrulerz&#39; syntax is also valid, and it logs &#39;true&#39; to the console.  I think there is potentially a defect with getText?


How to getText on an input in protractor

For some reason when I run my tests at work the browser is maximized, but when I run them at home it only opens a browser window of about 50% width. This causes some discrepancies with scrolling down, etc., so I&#39;d ideally like to have it open a browser window of the same size on every machine the tests are run on. What&#39;s the best way to do this?

(I&#39;ve found some answers for other languages, but I haven&#39;t been able to adapt them to JavaScript)

Adding

    browser.executeScript(&#39;window.moveTo(0,0);&#39; +
        &#39;window.resizeTo(screen.width, screen.height);&#39;);

does nothing (apparently `window.moveTo` and `window.resizeTo` are not supported by Google Chrome).



How to set default browser window size in Protractor/WebdriverJS

If [Protractor][1] is replacing Angular Scenario Runner for E2E testing, does that mean I will still be able to use it with [Karma][2] as my E2E testing framework ?


  [1]: https://github.com/juliemr/protractor
  [2]: https://github.com/karma-runner/karma

Can Protractor and Karma be used together?

I&#39;m trying out Protractor to e2e test Angular app and haven&#39;t figured out how to detect if an element has a specific class or not.

In my case, the test clicks on submit button and now I want to know if form[name=&quot;getoffer&quot;] has class .ngDirty. What may be the solutions?

    describe(&#39;Contact form&#39;, function() {
        beforeEach(function(){
            browser.get(&#39;http://localhost:9000&#39;);
            element(by.linkText(&#39;Contact me&#39;)).click();
        });

        it(&#39;should fail form validation, all fields pristine&#39;, function() {
            element(by.css(&#39;.form[name=&quot;getoffer&quot;] input[type=&quot;submit&quot;]&#39;)).click();
            expect(element(by.name(&#39;getoffer&#39;))).toHaveClass(&#39;ngDirty&#39;); // &lt;-- This line
        });
    });

How to test if an element has class using Protractor?

I want to test file uploading using an angularjs e2e test. How do you do this in e2e tests? I run my test script through grunt karma.


&lt;input type=&quot;file&quot; id=&quot;image&quot; data-name=&quot;image&quot;&gt; 




How to upload file in angularjs e2e protractor testing

I have found Protractor framework which is made for AngularJS web applications.

How can I use Protractor on a website which is not using AngularJS?

I wrote my first test and Protractor triggers this message:

    Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
 

how to use Protractor on non angularjs website?

In a test spec, I need to click a button on a web page, and wait for the new page completely loaded.

    emailEl.sendKeys(&#39;jack&#39;);
    passwordEl.sendKeys(&#39;123pwd&#39;);
		    
    btnLoginEl.click();

    // ...Here need to wait for page complete... How?

    ptor.waitForAngular();
    expect(ptor.getCurrentUrl()).toEqual(url + &#39;abc#/efg&#39;);
		    	



Protractor : How to wait for page complete after click a button?

Is there a way to print a custom error message when a Jasmine `expect()` fails?

As an example, for end to end testing I have an array of web pages and I use one test to go to each URL and assert an element exists on each page.  I know I can put every `expect()` into a separate test, but I&#39;d rather iterate through the array and log the page URL on failure.  

Print message on expect() assert failure

I have seen it so many times where people suggest to use: 
 
    browser.ignoreSynchronization=true;  // or false

But I do not understand why do we need it?

What is browser.ignoreSynchronization in protractor?

I am working on developing Protractor tests using Typescript. It appears that the d.ts file available for protractor is very out of date. I am trying to update it to include the Expected Conditions protractor has [added](http://www.protractortest.org/#/api?view=ExpectedConditions).

To summarize it, Expected Conditions are a set of functions within protractor that return a function that returns a promise of your value.

An example of usage:

    protractor.ExpectedCondtions.visibilityOf(element(by.id(&#39;button1&#39;)))();

 I am stumped on how to tell protractor that I am returning a function that will return a specific return type. Does anyone have any experience with this?

What is the return type for a function that returns another function

I&#39;m getting the error shown below while trying to execute &#39;npm install&#39; command. 

&gt; Error: tunneling socket could not be established, cause=connect ECONNREFUSED 10.232.207.137:8080

What do I miss?

![screenshot][1]


  [1]: http://i.stack.imgur.com/uTzvq.png

Error &#39;tunneling socket&#39; while executing npm install

I&#39;ve tried this:

    browser.actions().keyDown(protractor.Key.ENTER).keyUp(protractor.Key.Enter).perform();

which gives the error:

    Error: Not a modifier key

How to make protractor press the enter key?

Is there a way to run a Angular E2E test written using protractor slowly so that I can watch what is happening?

Can protractor be made to run slowly?

I have an element defined as 

    this.clientRowName = element(by.id(&#39;CLIENT_NAME&#39;)); //page object file

I want to read the text in this element which is &quot;ABC&quot; but doing:
    var client = page.clientRowName.getText(); 

returns an object instead of a string. Is there any other way that I can get the text for the element


Protractor: element.getText() returns an object and not String

**The Story:**

One of the approaches to solve captchas, like Google ReCaptcha, is to try to *imitate the human mouse actions*: movements, hovering and clicks.

[Some users reported][1] that making mouse moves as [B-spline curves][2] worked for them.

**The Question:**

How to move the mouse to a particular element following the B-spline trajectory via Selenium?


----------


Note that the regular `browser.actions().mouseMove(elm).perform();` would &quot;jump&quot; to the element straight and far too quickly. My understanding is that it is a matter of slowing down the movement speed, &quot;jumping&quot; from point to point smoothly following the mathematical model for the B-spline trajectory.

&lt;sup&gt;We are using Protractor/JavaScript, but the question is really language-agnostic.&lt;/sup&gt;
&lt;sup&gt;Note that I&#39;m not trying to solve the captcha, or contribute to the &quot;captcha-solving making new evil bots violating terms of use here and there&quot; space. I&#39;m just curious and eager to obtain more skills in the test automation space.&lt;/sup&gt;

  [1]: https://stackoverflow.com/a/37220168/771848
  [2]: https://en.wikipedia.org/wiki/B-spline

Human-like mouse movements via Selenium

I want to output the text of a div in my protractor test, so far I have:

    console.log(ptor.findElement(protractor.By.id(&#39;view-container&#39;)).getText());

but this outputs

    [object Object]

I tried &quot;toString()&quot; and same result.

Is there a way to output the text to the console?

Protractor console log

We have a rather big set of end-to-end tests on Protractor. We are following the Page Object pattern which helps us to keep our tests clean and modular. We also have a set of helper functions which help us to follow the [DRY principle][1].

**The Problem:** 

A single spec may require multiple page objects and helper modules. For instance:

    &quot;use strict&quot;;
    
    var helpers = require(&quot;./../../helpers/helpers.js&quot;);
    var localStoragePage = require(&quot;./../../helpers/localStorage.js&quot;);
    var sessionStoragePage = require(&quot;./../../helpers/sessionStorage.js&quot;);
    
    var loginPage = require(&quot;./../../po/login.po.js&quot;);
    var headerPage = require(&quot;./../../po/header.po.js&quot;);
    var queuePage = require(&quot;./../../po/queue.po.js&quot;);
    
    describe(&quot;Login functionality&quot;, function () {
    
        beforeEach(function () {
            browser.get(&quot;/#login&quot;);
    
            localStoragePage.clear();
        });
    
        // ...
    
    });

You can see that we have that directory traversal in every require statement: `./../..`. This is because we have a `specs` directory where we keep the specs and multiple directories inside grouped by application functionality under test.

**The Question:**

What is the canonical way to approach the relative path problem in Protractor?

In other words, we&#39;d like to avoid traversing the tree, going up to import modules. It would be much cleaner to go down from the base application directory instead.


----------

**Attempts and thoughts:**

There is a great article about approaching this problem: [Better local require() paths for Node.js][2], but I&#39;m not sure which of the options is a recommended one when developing tests with Protractor.

We&#39;ve also tried to use [`require.main`][3] to construct the path, but it points to the `node_modules/protractor` directory instead of our application directory. 


  [1]: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
  [2]: https://gist.github.com/branneman/8048520
  [3]: https://nodejs.org/api/modules.html#modules_accessing_the_main_module

Using require with relative paths

I&#39;m using Protractor to perform some end to end tests, and I&#39;d like to pass in login credentials through the command line instead of storing them in a spec file.  I found one post where someone used `process.argv.forEach`, but how can I store those values and use them in another spec file? I have a file called `login-spec.js` where I&#39;d like to use the command-line arguments. 

Thanks!

How can I use command line arguments in Angularjs Protractor?

I am writing tests in Protractor for an Angular app. I want to fill out a login form and submit it. 

How can I do this? I have got this far, but I don&#39;t know how to set the value of the email and password fields. 

    describe(&#39;The dashboard&#39;, function() {
      ptor = protractor.getInstance();
    
      beforeEach(function() {
        ptor.get(&#39;#/dashboard&#39;);
        var email = ptor.findElement(protractor.By.model(&#39;email&#39;));
        var password = ptor.findElement(protractor.By.model(&#39;password&#39;));
        var submit = ptor.findElement(protractor.By.tagName(&#39;button&#39;));
        // Fill out the form?
        submit.click();
      });
    
      it(&#39;has a heading&#39;, function() {
        heading = ptor.findElement(protractor.By.tagName(&#39;h1&#39;));
        expect(heading.getText()).toEqual(&#39;My Dashboard&#39;);
      });
    });

Protractor testing: How to set the value of text elements in a login form?

I&#39;m new on protractor, and I&#39;m trying to implement an e2e test.
I don&#39;t know if this is the right way to do this, but...
The page that I want to test is not a full angular page based, so... I&#39;m having some trouble.

On my first spec I have: 

    describe(&#39;should open contact page&#39;, function() {
    var ptor = protractor.getInstance();

    beforeEach(function(){

       var Login = require(&#39;./util/Login&#39;);
       new Login(ptor);
    });

I have created this Login class, but after login I want to open the contact page, but protractor immediately try to find element before the page is fully loaded.

I&#39;ve tried to use:

    browser.driver.wait(function() {

        expect(browser.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).isDisplayed());
        ptor.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).click();

    });

But it doesn&#39;t work... it always try to find the element before the page loads.
I tried this one too:

    browser.driver.wait(function() {
        expect(ptor.isElementPresent(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)));          
        ptor.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).click();
    });

I&#39;m able to do that using `browser.sleep();` but I don&#39;t think that is a good option. Any idea? On my login class I have:

    ptor.ignoreSynchronization = true;

How can I wait for this `@href=&#39;#/contacts` before protractor tries to click on it?


All Protractor Solutions on Gang of Coders

Total of 26 Protractor Solutions