Logical not doesn't work with browser conditions

[DmitryShashkov]

Hi! I am trying to use not together with urlContains, like this:

import { not, urlContains } from 'wdio-wait-for';
describe('Login page', () => {
  let page: LoginPage;

  beforeAll(async () => {
    page = new LoginPage();
  });

  // a couple of `it` statements skipped

  it('should log user in and redirect them to corresponding home page', async () => {
    const submitButton = page.getSubmitButton();
    await submitButton.click();

    await browser.waitUntil(not(urlContains('login')));
    await sleep(500);

    const urlAfterRedirects = await browser.getUrl();
    expect(urlAfterRedirects).toBe(`${browser.options.baseUrl}v3/library/my`);
  });
});

And get the following error:

Error: waitUntil condition failed with the following reason: Cannot read properties of undefined (reading 'getTitle')

In the source code for urlContains, it expects the context to be passed, which works if you don't wrap it:

 await browser.waitUntil(urlContains('login')); // this works correctly

but doesn't work when wrapped in not.

I believe the situation is the same for all combinations of logical + browser conditions.

[christian-bromann]

Hey @DmitryShashkov ,
thanks for filing the issue. This seems indeed like bug. We would appreciate any help on this so please help us out! Have a look at our contributing guidelines and reach out if you have any questions. Cheers!

[M-Hammad-Faisal]

@christian-bromann I am looking onto this issue.

[M-Hammad-Faisal]

@christian-bromann i found the issue. When I use wait until it acts like this.

browser.waitUntil(urlContains("text")) => browser.waitUntil((this: WebdriverIO.Browser)=> {
                                           const url = await this.getUrl(); 
                                           ....
                                          })

but when i wrap it inside a function then, it becomes:

browser.waitUntil(not(urlContains("text"))) => browser.waitUntil(()=>{
                                               const condition = (this: WebdriverIO.Browser)=> {
                                                 const url = await this.getUrl(); 
                                                 ....
                                               }
                                               return !condition
) 

Here this which is WebdriverIO.Browser gets lost as it gets nested in an arrow function.

this only works in functions made with function keyword. So, in an arrow function this is just undefined.

[christian-bromann]

Nice finding 👍 what would you suggest for a fix?

[M-Hammad-Faisal]

@christian-bromann we have two possible solutions:
one is that, i create logical functions with function keyword and bind the function with this word using func.call(this)
and other one is that rather than relying on this i directly use browser.getUrl. what do you suggest?

[M-Hammad-Faisal]

i believe later one would be nicer approach. we donot need to make code more complex and wonder where is this has gone. 😆

[christian-bromann]

Please go ahead and raise a PR with the approach you have in mind, I think it is better to make a final decision once there is some code.

[M-Hammad-Faisal]

@christian-bromann I found the first approach much shorter. 😄 have a look on this PR.