Angular 7, Protractor not identifying the angular web elements and does not interact with it

Question

I am new to protractor and I am trying to automate an Angular 7 application.

I have unique ids and classes to identify the web elements. I have written basic protractor test, to launch my application and interact with the web elements on the page.

The home page of the application is angular and has angular elements so waitForAngular is out of question. (I guess)

Protractor fails to identify the web elements and passes the specs. I have run it in debug console too no elements are found using element(by.css(‘classname’)).click();

I am also using async and await and disabled the selenium promise manager.

Please help I am stuck and I have read all the posts but none of the solutions apply to my case.

Answer 1

you might need to wait until element is present. Please have a try like this.

var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(element(by.css(‘classname’))), 5000, 'Element taking too long to appear in the DOM');
element(by.css(‘classname’)).click();

Please let me know if it is not working.

Answer 2

Have you tried this?

1.As from information you have posted, You have I have unique ids and classes to identify the web elements and you have run it in debug console too no elements are found using element(by.css(‘classname’)).click();

Are you identifying web element correctly on web page? To check this, do try below code snippet. This is just for confirmation you are identifying right web element.

highlightElement = function (locator) {
        console.log('highlight--');

        console.log('locator---:' + locator);
        const ele = browser.driver.findElement(locator);

        return browser.driver.executeScript('arguments[0].setAttribute(\'style\', arguments[1]);', ele, 'color: Red; border: 2px solid red;')
        .then(function (resp) {
            browser.sleep(2000);
            return ele;
        }, function (err) {
            console.log('error is :' + err);
        });
    };

const ele = element(by.css(‘classname’)); // element identification 

highlightElement(ele); //  verify right identification 
browser.sleep(5000); // just to see the highlighted element on web page

2. To wait protractor until the page is fully loaded. try below snippet

await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'loading', 2000)
        .then(() => true, () => true);
await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'complete', 5000)