Protractor + Storybook: Failed: No element found using locator: By(css selector)

Question

I am trying to implement e2e testing of UI components for Storybook with Protractor. Any attempt to use a locator to find an element on the page provides an error in the terminal saying the element cannot be found using a Protractor locator, i.e (by.css, by.id and by.className). However, when running tests involving button text, they pass successfully with no errors.

To Reproduce

Steps to reproduce the behavior: To reproduce the issue, protractor must be installed within a storybook project using Angular. Run the protractor command to start the test.

Test fails with this error in the terminal: Failed: No element found using locator: By(css selector)

Expected behavior

The expected behavior is to locate an input field on the screen and pass text into the input field to check that the value of that input is equal to a specific value.

Code:

conf.js: 

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  capabilities: {
    browserName: 'chrome'
  }
}

forms-spec.js: 

describe('Contact Form', function() {
    browser.waitForAngularEnabled(false);
    browser.ignoreSynchronization = true;
    it('should allow me to enter a first name', async() => {
    await browser.get('http://localhost:6006/?path=/story/components-contact-form--default');

    let text = element(by.css('input'));
    element(by.css('input')).sendKeys('Rohtas');
    expect(text.getAttribute('value')).toEqual('Rohtas');
      
    });

  })
Error: NoSuchElementError: No element found using locator: By(css selector, input)

HTML:

<input placeholder="name" type="text">

System:
OS: Windows 10 10.0.17763
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 83.0.4103.97
Edge: Spartan (44.17763.831.0)
npmPackages:
@storybook/addon-a11y: ^5.3.19 => 5.3.19
@storybook/addon-actions: ^5.3.19 => 5.3.19
@storybook/addon-docs: ^5.3.19 => 5.3.19
@storybook/addon-jest: ^5.3.19 => 5.3.19
@storybook/addon-knobs: ^5.3.19 => 5.3.19
@storybook/addon-links: ^5.3.19 => 5.3.19
@storybook/addon-notes: ^5.3.19 => 5.3.19
@storybook/addon-storysource: ^5.3.19 => 5.3.19
@storybook/addon-viewport: ^5.3.19 => 5.3.19
@storybook/addons: ^5.3.19 => 5.3.19
@storybook/angular: ^5.3.19 => 5.3.19
@storybook/storybook-deployer: ^2.8.6 => 2.8.6

Additional context

If I add a className or ID to the input field, and try to locate using either method the same error appears. However, using buttonText or partialButtonText on a button from the Protractor API works fine. Is there a compatibility issue between Protractor and Storybook I was not aware of?

The storybook iFrame could be getting in the way of finding the element but I'm unsure as to whether there's a workaround for it.

Answer 1

Many reasons:

• browser.waitForAngularEnabled(false); needs await
• await browser.waitForAngularEnabled(false); should go inside it
• browser.ignoreSynchronization = true; can be removed. Read official docs, not forums on internet, it has been removed
• element(by.css('input')).sendKeys('Rohtas'); is a promise and needs await
• but before you send keys, make sure you wait long enough for the page to load, probably you'll just need to wait until the input is present and visible (maybe clickable will work too)