Cannot Use Page Objects

[neekers]

Cannot redeclare block-scoped variable 'protractor_1'. (2451)

I get this with the newest version of everything when I include the page object that imports protractor. Also there is no more 'protractor/globals'

protractor@5.1.1 protractor-cucumber-framework@1.0.1 cucumber@1.3.1 ts-node@2.1.0

Can you help?

[igniteram]

@neekers Sure, can you please tell what you are trying to do? Also can you please post your spec file, conf file and the error stacktrace so that it would help me debug the issue.

[neekers]

I'm not trying to do anything fancy at all, really.

Also forgot to mention that I'm using Angular-CLI as a project base.

Scenario: Verify the home page loads
    Given I am on the home page
    Then I should see the headline "Commander"

steps.ts

import {browser, $} from 'protractor';
import {HomePage} from '../../page-objects/home.po';

const chai = require('chai').use(require('chai-as-promised'));

export = function () {
    let homePage: HomePage;

    this.Before(() => {
        homePage = new HomePage();
        this.homePage.navigateTo();
    });

    this.Given(/^I am on the home page$/, () => {
        return chai.expect(browser.getTitle()).to.eventually.equal('Serenity Commander');
    });

    this.Then(/^I should see the headline "(.*?)"$/, (message) => {
        return chai.expect(homePage.getHeadline()).to.eventually.equal(message);
    });
};

home.po.ts

import {$, browser} from 'protractor';

export class HomePage {
  public headline: any;
  public headline2: any;
  public headline3: any;

  constructor() {
    this.headline = $('app-root h1');
    this.headline2 = $('md-toolbar h2');
    this.headline3 = $('md-card-title h3');
  }

  navigateTo() {
    return browser.get('/');
  }

  getHeadline() {
    return this.headline.getText();
  }

  getPageHeadline() {
    return this.headline2.getText();
  }

  getContentHeadline() {
    return this.headline3.getText();
  }
}

protractor.config.js

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  specs: [
      'e2e/features/**/*.feature' // accepts a glob
  ],
  cucumberOpts: {
      compiler: "ts:ts-node/register",
      format: "pretty",
      // require step definitions
      require: [
          'e2e/features/step_definitions/**/*.steps.ts' // accepts a glob
      ]
  },
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  },

  onPrepare: function() {
      const globals = require('protractor');
      const browser = globals.browser;
      browser.ignoreSynchronization = true;
  }
};

[igniteram]

I see that in your protractor.config.js in onPrepare function you are requiring globals which should not be done with latest protractor version.

Simply import browser from protractor and use it :

import {browser,Config} from 'protractor';

onPrepare: () => {
     browser.ignoreSynchronization = true;
}

For reference please have a look at the config example provided in this repo : https://github.com/igniteram/protractor-cucumber-typescript/blob/master/config/config.ts

Also the error you are facing is pretty common in typescript pls check out this StackOverFlow question: http://stackoverflow.com/questions/38602391/cannot-redeclare-block-scoped-variable-reducer-typescript

[neekers]

Removed 'onPrepare' and 'beforeLaunch' and then it started to work. Guess I don't need that stuff. Also my config file is a js file not a ts file so import doesn't work here. Need to use require if that was going to be used.

Thanks for the tips!

[vvedachalam]

I had the same issue Unhandled rejection TSError: ⨯ Unable to compile TypeScript e2e\po\homepage.po.ts (3,7): Cannot redeclare block-scoped variable 'protractor_1'. (2451) e2e\po\homepage.po.ts (7,9): Supplied parameters do not match any signature of call target. (2346) at getOutput (c:\XXXX\ng\node_modules\ts-node\src\index.ts:30

Just followed @neekers by commenting 'onPrepare' and ran the test.. voila !!!!

Then I reverted the code and started debugging opPrepare: onPrepare: function () { require('ts-node').register({ project: 'e2e/tsconfig.e2e.json' }); browser.manage().window().maximize();

// implicit and page load timeouts
browser.manage().timeouts().pageLoadTimeout(40000);
browser.manage().timeouts().implicitlyWait(5000);

Reporter.createDirectory(jsonReports);

}, Found the culprit is : tsconfig.e2e.json which extends tsconfig.json I used
"target": "es6",

I changed this to "target": "es5", in line with tsconfig.json which has "target": "es5"

So now with onPrepare module the tests are running without any issues

PS : I had protractor framework up and running and tried to introduce Cucumber ( picking the files from angular4-protractor-cucumber)