Cannot find name '$'. Do you need to install type definitions for jQuery

Also issue with the types as import element = WebdriverIO.Element;
WebdriverIO is getting picked from @wdio/sync not from @wdio/mocha-framework

tsConfig.json is as below
{
"compilerOptions": {
"baseUrl": ".",
"lib": ["es2017", "dom"],
"module": "commonjs",
"target": "es6",
"strict": false,
"strictNullChecks": false,
"resolveJsonModule": true,
"typeRoots": [
"./declarations", "./node_modules/@types", "./node_modules/@wdio/@types", "./node_modules/webdriverio/async", "./node_modules/@wdio/mocha-framework"],
"exclude": ["node_modules"]
}

protractor.ExpectedConditions" is unknown to this codemod

Is there a way to make the async codemod automatically wrap multiple items in parentheses like this?

We are trying to migrate our script from protractor to wdio. But we are getting this error if there is any browser.actions() presents in script. As of now we did not find any solution for this.

Hi team,

Thanks for your help with the previous question.
I would like to ask if you could publish new version of your package so we can update it in our repository?

The async scripts works very well, thank you!

One note though, is that it forgets to add the await keyword on lines like this one:
const inputClassic = $(selectors.inputClassic);
where it should transform those into:
const inputClassic = await $(selectors.inputClassic);.

Do note that it does add the await keyword in lines like that:
expect($(selectors.elementP1).getText()).toEqual('2.140%');
(to: expect(await $(selectors.elementP1).getText()).toEqual('2.140%');)

When attempting to convert my page objects from Protractor to WDIO v7, the format of the page objects change as follows:

FROM

class targetPage extends basePage {
constructor() {
super();
this.pageObjects = {
minimumPaymentDue: element(by.id("rdStatementBalance")),
nextButton: element(by.xpath("//[@id='smartwizard']/nav/div[2]/button[2]")),
agreeCheckBox: element(by.className("ccheckbox-primary ccheckbox")),
submitButton: element(by.css("button[id=ubmit]")),
payMyBillSubmit: element(by.id("btnSubmitPayMyBill"))

TO

class targetPage extends basePage {
constructor() {
super();
this.pageObjects = {
minimumPaymentDue: $("#rdStatementBalance"),
nextButton: $("//[@id='smartwizard']/nav/div[2]/button[2]"),
agreeCheckBox: $(".ccheckbox-primary ccheckbox"),
submitButton: $("button[id=ubmit]"),
payMyBillSubmit: $("#btnSubmitPayMyBill")
}}}

When this occurs and I attempt to run the test to validate, I get the following response:

[0-0] 2021-05-24T20:22:51.368Z ERROR @wdio/runner: Error: Unable to load spec files quite likely because they rely on browser object that is not fully initialised.
[0-0] browser object has only capabilities and some flags like isMobile.
[0-0] Helper files that use other browser commands have to be moved to before hook.
[0-0] Spec file(s): [spec file path]
[0-0] Error: ReferenceError: $ is not defined

Now, I understand if I update my page objects file to be more like this, the test will run correctly without the browser object initialization error:

class targetPage extends basePage {
constructor() {
super();
this.PageObjects = {
spinner: "#ioBB",
pageHeader: ".HeaderLabel",
requiredLoanAmount: "#txtReqLoanamt",
firstName: "#txtFIRSTNAME"
}}}

My basePage helper function is set up as follows for a command to select a page object (usually a field):

async select(locator) {

    const elem = await $(locator);

    await elem.waitForDisplayed();

    await elem.scrollIntoView();

    await elem.moveTo();

    await elem.click();

}

So, while I can get it to work, it sort of ruins the point of using the code mod as i'm having to update just about all of the page objects in my project manually, which appears to be the heaviest lift for conversion.

Can you provide solution (if already exists), or validate this needs to be solutioned?

Codemod does not seems to like the :
When it is removed it runs fine. Please help in if there is a solution for the same.

ERR .\e2e\steps\general\loginlogout.step.ts Transformation error (Missing semicolon. (22:13))

code in line 22
let loginPage: Login = new Login();

Code related to it
import { Loginlogout } from '../../pages/general/loginlogout.po';
let loginLogout : Loginlogout = new Loginlogout();

Same error happens else where as well when I try to write into excel sheet. Snippet form the function.
var wb = new XLSX.Workbook();
wb.xlsx.readFile(fileloc).then(function(){
let sheet:Worksheet = wb.getWorksheet("Sheet1");

Same error is thrown at let sheet:

Hi Team,

Is Codemod has been tried on Cucumber protractor framework based project migration? When i try with the migration as per the procedure provided in 'https://webdriver.io/docs/protractor-migration' (with my realtime project instead of boilerplate project), every alternative lines i am getting error and manually i have to correct it. This is hectic process.

Sometime the error is very generic like 'Unexpected token, expected "{", got this error on the first 'async' line of below code.

Sample code which i am trying to convert.

@then('the user should be navigated to the personal details page')
async theUserShouldBeNavigatedToThePersonalDetailsPage(): Promise {
const url = await browser.getCurrentUrl();
assert.isTrue(url.endsWith('Userprofile'));
}

Is there something i am missing ? Do i need to refer something else instead of 'https://webdriver.io/docs/protractor-migration' ?

Please advice on this.

I have this very simple spec file

import { browser, logging } from 'protractor';
import { AppPage } from '../../e2e/src/app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', async () => {
    await page.navigateTo();
    expect(await page.getTitleText()).toEqual('teste2e app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

which is the default of angular 12 cli

trying to migrate it to wdio using npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/app.e2e-spec.ts like what was suggested in the Migrate Test File

but it throw this error

% npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/app.e2e-spec.ts
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
 ERR ./test/specs/app.e2e-spec.ts Transformation error (Missing semicolon. (5:10))
SyntaxError: Missing semicolon. (5:10)
    at instantiate (/Users/irobert/teste2e/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
    at toParseError (/Users/irobert/teste2e/node_modules/@babel/parser/src/parse-error.js:58:12)
    at Object.raise (/Users/irobert/teste2e/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
    at Object.semicolon (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/util.js:146:10)
    at Object.parseVarStatement (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/statement.js:904:10)
    at Object.parseStatementContent (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/statement.js:391:21)
    at Object.parseStatement (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Object.parseBlockOrModuleBlockBody (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/statement.js:1082:25)
    at Object.parseBlockBody (/Users/irobert/teste2e/node_modules/@babel/parser/src/parser/statement.js:1058:10)
    at Object.parseBlockBody (/Users/irobert/teste2e/node_modules/@babel/parser/src/plugins/estree.js:153:13)
All done. 
Results: 
1 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 0.730seconds 

Any plans to add direct method to findElement by binding or by repeater?

When trying to translate from protractor to wdio v7, I had errors about API incompatibility (ex: browser.actions) not handled by the codemod. Instead of having a blocking error (with a lot of usefull information, which a good thing) I suggest:

• To show a warning instead (with the same message and help links), to be able to finalize the auto conversion.
• To comment the problematic lines (now it should compile).
• To add a // TODO: you have to manually do this and that, because this and that.
• To add an exception just before the lines, in order to be sure a developper will handle the conversion manually and can't run this test without a failure.

Let me give you an example:

Before:

    browser.actions()
         .mouseMove(element)
         .mouseMove({x: 200, y: 0})
         .perform();

After:

    throw new Error('You forgot to convert browser.actions(...), check source code at line:col ');
    // TODO: convert to wdio
    // <explanations here>
    //  browser.actions()
    //     .mouseMove(element)
    //     .mouseMove({x: 200, y: 0})
    //     .perform();

Regards,

Hello,

We have an issue when migrating from wdio V6 to V7 with the setWorldConstructor from the cucumber framework package.
We use the setWorldConstructor to get our tags from the feature file and we adapted this method for our own needs.
If we downgrade "@wdio/cucumber-framework": "<7", it works

In beforeFeature function in the config file we set the world constructor to get our tags:

BeforFeature(...){
	...
	setWorldConstructor(CustomWorld(tags));
	...
}

And then in the hooks, we call the function defined in CustomWorld (to set/get a tag).

Now with the V7 and using "@cucumber/cucumber", in the hook, we cannot call this function.
--> TypeError: this.FunctionName is not a function

We need some help to understand if It's an issue on your side or if we have missed something on our configuration plz?

I thank you in advance :))

Hello Team,

We have component governance alert in Azure DevOps project. We must update set-value package to 4.0.1 version.
Could ypu please update jscodeshift from ^0.13.1 to ^0.14.0?

• find and document all relevant changes in v9
• implement codemods for all of them, and add tests for it

The following snippets are still not properly transformed:

• browser.switchTo().window(handles[handles.length - 1]);
• await this.deleteButtons.count()
• await this.deleteButtons.get(0).click();
• find statements like require('ts-node') in onPrepare and notify about autocompile in webdriverio / remove this statement
• find statements like jasmine.getEnv() in onPrepare and notify about WebdriverIO reporters
• const logs = await browser.manage().logs().get(logging.Type.BROWSER);

Hi Team,

I am unable to understand error. Could you please help me to fix attached page object file? (Remove .txt extension of the file, git is not allowing .ts file upload)
create-case.po.ts.txt
protractor.conf.js.txt

Command and Error log:

C:\automation\webdriverIO\bwf-e2e-protractor-master>npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./e2e/test/specs/create-case.po.ts
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
ERR ./e2e/test/specs/create-case.po.ts Transformation error (Unexpected token, expected "," (14:47))
SyntaxError: Unexpected token, expected "," (14:47)
at instantiate (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parse-error\credentials.js:61:22)
at toParseError (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parse-error.js:58:12)
at Object.raise (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\tokenizer\index.js:1763:19)
at Object.unexpected (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\tokenizer\index.js:1808:16)
at Object.expect (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parser\util.js:153:28)
at Object.parseBindingList (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parser\lval.js:397:14)
at Object.parseFunctionParams (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parser\statement.js:1326:24)
at Object.parseMethod (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\parser\expression.js:2343:10)
at Object.parseMethod (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\plugins\estree.js:255:24)
at Object.pushClassMethod (C:\automation\webdriverIO\bwf-e2e-protractor-master\node_modules\jscodeshift\node_modules@babel\parser\src\plugins\estree.js:171:12)
All done.
Results:
1 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 3.505seconds

I am migrating my framework from protractor to WDIO.
Foe one the file I am getting Transformation error.

Transformation error (undefined does not match field "value": string | boolean | null | number | RegExp of type Literal).
Error: undefined does not match field "value": string | boolean | null | number | RegExp of type Literal

Hi everyone, I am trying to transform a file called baseSteps.js to webdriverIO file using command

npx jscodeshift ../node_modules/@wdio/codemod/protractor/ test/steps/baseSteps.js

Before this i have installed :
npm install --save-dev @wdio/cli
npx wdio config (ran the configuration wizard) I have configured cucumber framework.

After which I ran
npx jscodeshift ../node_modules/@wdio/codemod/protractor/ test/steps/baseSteps.js

In package.json I have all the dependencies

So when I run npx jscodeshift ../node_modules/@wdio/codemod/protractor/ test/steps/baseSteps.js
it throws :
env: node\r: No such file or directory

Not sure what I am missing. though baseSteps.js file exists in test/steps folder. Can someone suggest?

Note: I am using mac OS. I was going through help in some other articles and I think this issue is caused by line endings with CRLF, where as its must be LF. For ex: mrmlnc/svg2sprite-cli#4
and many more when we search for env: node\r: No such file or directory hopefully this will give an idea

• framework: 'jasmine2' in caps to framework: 'jasmine'
• transform by.repeater like this;

   - var row = element.all(by.repeater('dataRow in displayedCollection')).get(1);
   - var cells = row.all(by.tagName('td'));
   + var row = await $$('[ng-repeat="dataRow in displayedCollection"]')[0]
   + var cells = row.$$('td');
  

•  const loc = "file-submit";
   return element(by.id(loc));
  

  is being transformed to

  const loc = "file-submit";
  return $("#undefined");
  

Rather than calling jscodeshift directly, e.g.:

$ npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./e2e/

It would be nicer to have a binary exposed that allows us to be more flexible with the codemod execution, e.g. to migrate from v5 to v7 it would be great to just having to call:

$ npx codemod v6 v7

which then calls jscodeshift seperately.

Also the package should automatically detect the files and pick e.g. TypeScript as parser if all files are written that way.

When compiling TypeScript files the parser is a bit different. I am afraid we need to write separate codemods for TypeScript.

While testing the codemod I discovered that the following snippets aren't properly transform:

• await browser.actions().sendKeys(protractor.Key.ENTER).perform(); ▶️ await browser.keys("Enter")
• in capabilties: chromeOptions ▶️ goog:chromeOptions
• all protractor.* to throw
• remove any additonal options to url command
• transform waitUntil parameters

Also it seems that not everything gets transform, we should run all transformations multiple times.

It would be nice to have a codemod that can convert wdio sync code to async.

Hi,

Migrate Command is giving an error while converting the following.

await browser.actions().doubleClick(this.btnDoubleClick).perform();
await browser.actions().mouseDown(this.btnDoubleClick).mouseUp().perform();
await browser.actions().mouseMove(this.btnDoubleClick).click().perform();

ERR ./protractorTests/pages/buttons.page.js Transformation error (Error transforming ./protractorTests/pages/buttons.page.js:16)
Error transforming ./protractorTests/pages/buttons.page.js:16

    await browser.actions()

            ^

Can not transform "actions" command as it differs too much from the WebdriverIO implementation. We advise to refactor this code.

For more information on WebdriverIOs replacement command, see https://webdriver.io/docs/api/webdriver#performactions
at ./protractorTests/pages/buttons.page.js:16:14
All done.
Results:
1 errors
0 unmodified
0 skipped
0 ok

action commands from protractor are ot able to migrate

When migrating a Typescript Protractor file, types like ElementFinder are not transformed.

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor --parser=ts  test.po.ts

• const windowLocation = await browser.manage().window().getPosition()
• browser.manage().deleteAllCookies();

Sending 1 files to free worker...
 ERR test\e2e\pages\series-actions.ts Transformation error (Error transforming test\e2e\pages\series-actions.ts:276)
Error transforming test\e2e\pages\series-actions.ts:276

>                 await protractor.browser.actions().sendKeys(Key.UP).perform()
                        ^

Expected "proctractor.Key.XXX" as argument to the sendKeys command. Please raise an issue in the codemod repository: https://github.com/webdriverio/codemod/issues/new
  at test\e2e\pages\series-actions.ts:276:22

The interesting bit seems to be

         it('should select the series and combine', async () =>{
            
            // select the series
            let thumbnails:ElementFinder[] = await thumbs.thumbnails();
            expect(thumbnails).not.toBeUndefined();
            //reset selection to first series
            for(let i = 0 ; i < seriesCount ; i++){
                await protractor.browser.actions().sendKeys(Key.UP).perform(); 
            } 
            // scroll down to series via arrow keys
            for( let s = 0 ; s < selectedSeries ; s++ ){
                await protractor.browser.actions().sendKeys(Key.DOWN).perform();
            }
            expect(thumbnails[selectedSeries].isSelected()).toBeTruthy();
        })

Running the async codemod on the following code

const foo = function() {
  mySyncFunctionDoesNotReturnAPromiseOrEvenExist();
};

produces

const foo = function() {
  await mySyncFunctionDoesNotReturnAPromiseOrEvenExist();
};

This is syntactically incorrect for two reasons.

• The outer function context foo is not async so it doesn't make sense to use await within it.
• The function called in the inner scope mySyncFunctionDoesNotReturnAPromiseOrEvenExist does not return a Promise, so it doesn't make sense to use await.

When transforming this chained selector:

await table.element(by.className('datatable-header')).all(by.className('datatable-header-cell-label'))).click();

It turns into this:

await table.$(".datatable-header").$$(".datatable-header-cell-label").click();

Which isn't a valid async selector.

I recently used the async codemod to convert 2,500 lines of tests and found it to be inconsistent.

It would add await places where it shouldn't, for example, before underscore functions and String.startsWith() / .endsWith().

It would put await in the wrong place, for example before assert.equal() instead of before browser.getUrl():

await assert.equal(browser.getUrl(), base_url + '/#changesets', 'navigateToActiveChangesets');

It doesn't support functions added to the browser object (though perhaps this is discouraged & therefore by design). For example, this function isn't converted to async, and calls to it don't get an await injected:

  browser.getText = function (el) {
    return $(el).getText();
  };

It seems to assume the codebase is on WebDriver v7.9+ and can use a single async on chained calls. For example, it only injected two awaits here:

  async function getDot(dotClass, labelClass) {
    return (await (await $(dotClass + '[style="opacity: 1"]')
      .parent())
      .parent())
      .find(labelClass)
      .html();
  }

Perhaps this is a fair assumption, but it would be nice if it was documented in case others, like me, plan to upgrade to 7.9+ after the async codemod instead of before.

We are trying to migrate protractor automation suits to webdriverio.
we are seeing type error for transforming config.js using command npx jscodeshift -t ./node_modules/@wdio/codemod/protractor config/config.js

Error message :
ERR config/config.js Transformation error (Cannot read properties of undefined (reading 'map'))exact error is Transformation error (Cannot read properties of undefined (reading 'map'))

From stacktrace : node_modules/@wdio/codemod/protractor/utils.js:297:61)

const suites = require('./suites').suites

I have installed codemod and wdio/cli using command

npm install jscodeshift @wdio/codemod

npm install --save-dev @wdio/cli

Attached config file

config.js.zip

Rather than throwing an error such as:

Error transforming ./conf.js:
>      chromedriver: 'C/my app/chromedriver.exe'
The option "chromedriver" is not supported in WebdriverIO. We advise to use the "wdio-chromedriver-service" instead.
For more information on this configuration, see https://www.npmjs.com/package/wdio-chromedriver-service.
all done.

We should add Chromedriver to the list of services, e.g.:

services : [
    ['chromedriver', {
        protocol : 'http',
        hostname : 'localhost', 
        port : 4444,
        path : 'C:/my app/chromedriver.exe'
    }],
]

I'm getting errors like "Error: undefined does not match field "value": string | boolean | null | number | RegExp of type Literal"
or TypeError: Cannot read property 'type' of undefined

Some are for chained statements related to previous use of the protractor browser object
Some I can't really track down

Do you think this is related to a Typescript misconfiguration on my end?

THNX

BTW I am migrating Protracter material to WebdriverIO