(feat): Added aliases for find() and findAll() command in new Element API

[AritraLeo]

I have performed the given TODO's for the issue - #4057

Add missing aliases
Add tests for the added aliases
Add missing types and tests for the added types

Raising this PR to hopefully get the issue resolved. Please let me know in case any change/s is required.
Thank You!

[garg3133]

@AritraLeo You don't need to push the changes you've made in ecosia.js file to test your changes locally.

Also, I don't see browser.element.getAll() and browser.element.findElements() commands being tested there.

[AritraLeo]

@AritraLeo You don't need to push the changes you've made in ecosia.js file to test your changes locally.

Also, I don't see browser.element.getAll() and browser.element.findElements() commands being tested there.

@garg3133 I'll surely revert all the changes from ecosia but before I push changes you can check lines - 166 & 196 where I've tested - browser.element.getAll() and browser.element.findElements() commands. Also I had executed tests present in testFind.js
and testFindAll.js they were successful! Please let me know if there's anything else.

Thank You!

[AritraLeo]

@garg3133 reverted the changes of ecosia.js file tests

[garg3133]

you can check lines - 166 & 196 where I've tested - browser.element.getAll() and browser.element.findElements() commands.

@AritraLeo That's not what I meant. You should test browser.element.getAll() not browser.element().getAll(). I'm sure that the former would not work because you've not added any implementation for it.

Please see the issue description for all the commands that should work.

[AritraLeo]

you can check lines - 166 & 196 where I've tested - browser.element.getAll() and browser.element.findElements() commands.

@AritraLeo That's not what I meant. You should test browser.element.getAll() not browser.element().getAll(). I'm sure that the former would not work because you've not added any implementation for it.

Please see the issue description for all the commands that should work.

Apologies for the oversight I'll make it work appropriately this time!
I'll also try to be more cautious from next time.

[AritraLeo]

you can check lines - 166 & 196 where I've tested - browser.element.getAll() and browser.element.findElements() commands.

@AritraLeo That's not what I meant. You should test browser.element.getAll() not browser.element().getAll(). I'm sure that the former would not work because you've not added any implementation for it.

Please see the issue description for all the commands that should work.

@garg3133
Also at this point I am kind of confused because I tried to follow the TODOs in the description but -
you've not added any implementation for it
can you please guide me as to where I should make changes because for alias I wouldn't create separate files I guess, then exactly where have I gone wrong. Please help me with this I am just trying to get a better understanding of the codebase.

Thank You!

[AutomatedTester]

Please add tests to show the API in use so we can make sure we know it's working as intended.

[AritraLeo]

Please add tests to show the API in use so we can make sure we know it's working as intended.

Actually I wrote the tests in ecosia.js but I later I came to know that, I should not push the changes there. So I did revert the file and I'll try to write all the tests in - (nightwatch\test\src\api\commands\web-element directory) mentioned in description.

Thank You!

[garg3133]

@AritraLeo The aliases for the .element namespace would go in lib/api/_loaders/element-api.js file. Once you've added the aliases, you should be able to run browser.element.findElements('.selector') and browser.element.getAll('.selector') command in your ecosia.js test suite.

For the unit tests, as you correctly mentioned, you'd need add those in the nightwatch\test\src\api\commands\web-element directory. testFind.js and testFindAll.js are the two files where you are required to add your tests.

[AritraLeo]

@AritraLeo The aliases for the .element namespace would go in lib/api/_loaders/element-api.js file. Once you've added the aliases, you should be able to run browser.element.findElements('.selector') and browser.element.getAll('.selector') command in your ecosia.js test suite.

For the unit tests, as you correctly mentioned, you'd need add those in the nightwatch\test\src\api\commands\web-element directory. testFind.js and testFindAll.js are the two files where you are required to add your tests.

Thank You so much for the direction @garg3133 I wrote the unit test suite in local but was getting errors it was clear to me that I was missing something I looked into similar merged PR's but couldn't get a solid way to get it resolved. I'll come up with the changes and update UT files asap. Thanks again!

[AritraLeo]

Hey @garg3133

I am having some queries regarding the tests to be performed for the given -

browser.element.find('selector')

is this the test (is already present in testFind.js line -70)

it('test .element.find()', async function() {
    const signupElement = this.client.api.element.find('#signupSection');
    assert.strictEqual(signupElement instanceof Element, true);
    assert.strictEqual(await signupElement.getId(), '0');

    const signupWebElement = await signupElement;
    assert.strictEqual(signupWebElement instanceof WebElement, true);
    assert.strictEqual(await signupWebElement.getId(), '0');
  });

cuz after adding the aliases like -

class ScopedElementAPILoader {
  static get availableElementCommands() {
    return [
      ['findElement', 'find', 'get'],
      ['findAll', 'findElements', 'getAll'],
      ['findByText'],
      ['findAllByText'],
      ['findByRole'],
      ['findAllByRole'],
      ['findByAltText'],
      ['findAllByAltText'],
      ['findByLabelText'],
      ['findByPlaceholderText'],
      ['findAllByPlaceholderText']
    ];
  }

to the file - lib/api/_loaders/element-api.js
as you recommended when I am using -

it('test browser.element.find()', async function() {
    const element = this.client.api.element.find('selector');
    assert.strictEqual(element instanceof Element, true);
    assert.strictEqual(await element.getId(), '0');
  
    const webElement = await element;
    assert.strictEqual(webElement instanceof WebElement, true);
    assert.strictEqual(await webElement.getId(), '0');
  });

it's failing is it because selector needs to accept an id ?
It might be an irrelevant question apologies if that is the case but I am really finding it hard to make the test work

[garg3133]

@AritraLeo Your test is failing because you are not passing a valid selector to the .find() command. We have mocks for a few selectors (like #signupSection) already defined so they work out of the box in our unit tests. You can global search signupSection to find out where the mock is defined for the selector.

[AritraLeo]

@AritraLeo Your test is failing because you are not passing a valid selector to the .find() command. We have mocks for a few selectors (like #signupSection) already defined so they work out of the box in our unit tests. You can global search signupSection to find out where the mock is defined for the selector.

I was thinking of this exact thing but last time you asked me to follow the TODO list so I did it anyway. I was pretty sure selector is defined in the mock. Thanks for the insight !
It seems I can push my commit now as the tests for these are passing I have added the alias to - lib/api/_loaders/element-api.js file as per instruction. I'll commit the changes shortly!

Thanks again!

[AritraLeo]

@garg3133 I've added the tests (ran the testing) please have a look also added the alias declaration in element file.

[AritraLeo]

@garg3133 @AutomatedTester Please review my code

[garg3133]

Looks good now, thanks!