selenium test is failing using selenium javascript webdriver

Question

I have installed javascript selenium webdriver and write a first test like this

I am writing a test for login. I enter correct username and password and try to login.

describe('Checkout Google.com', function () {
let driver;
before(async function () {
    // driver = await new Builder().forBrowser('chrome').build();
});
it('Search on Google', async function () {
    let driver = await new Builder().forBrowser('chrome').build();
    await driver.get('http://alpdev.s3-website-us-east-1.amazonaws.com/');
    // await driver.findElement(By.name('q')).sendKeys('selenium', Key.RETURN);
    this.timeout(5000);
    await driver.findElement(By.xpath("//input[@placeholder='Email']")).sendKeys('owais@demoshop.com');
    await driver.findElement(By.xpath("//input[@placeholder='Password']")).sendKeys('test');
    await driver.findElement(By.className('btn-submit')).click().then(()=> done());
    // assert.equal(title, 'dalenguyen - Google Search');
   });
    // close the browser after running tests
    after(() => driver && driver.quit());
 })

And my package json is like this

{
   "name": "selenium-01",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "mocha --recursive index.js"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "mocha": "^7.2.0",
     "selenium-webdriver": "^4.0.0-alpha.7"
   }
}

Now when i run ng run test so browser opens and test is passed visually meaning that login is happening but on console it prints like this

What's wrong here that it's giving an error.

Answer 1

So, I could not fully reproduce your case as the url in the script is not available anymore but found a few flaws though and tried some fixes.

First is your driver was declared twice.

Second, I believe the main problem (the reason you are getting the error mentioned above) is that you're using the then & done promises which are not needed as you're using the async & await functions.

Also I would recommend you use the css locators instead of the xpaths .

Another thing is you could use the async in the after(); closure, and you could use the arrow functions (async () => {}); all around instead of using the function keyword.

Below is your example but with a few changes and I am quite positive it will work (though if this is all on the google search page, there are no inputs on that page so those steps will fail, you'll have to add some extra steps to load the login page with the input fields available):

describe('Checkout Google.com', function () {
    let driver;
    before(async () => {
        driver = await new Builder().forBrowser('chrome').build();
    });

    it('Search on Google', async () => {
        await driver.get('http://alpdev.s3-website-us-east-1.amazonaws.com/');
        await driver.findElement(By.name('q')).sendKeys('selenium', Key.RETURN);
        await driver.sleep(5000);

        // the steps below will fail as per the description above
        await driver.findElement(By.css("input[placeholder='Email']")).sendKeys('owais@demoshop.com');
        await driver.findElement(By.css("input[placeholder='Password']")).sendKeys('test');
        await driver.findElement(By.className('btn-submit')).click();
        // assert.equal(title, 'dalenguyen - Google Search');
    });

    // close the browser after running tests
    after(async () => {
        await driver.quit();
    });
});

I hope this helps, please let me know.