Nuru Salihu Nuru Salihu - 5 months ago 95
Javascript Question

How do I verify/assert the html below in nightwatch js?

I have a html class

<a class="mobile-nav-btn" href="/news-mobile"><img src="img/news.svg" role="presentation"><span>Resources</span></a>


I am trying to click, then assert or verify the above is present .

.click('a[class="mobile-nav-btn"][href="/news-mobile"]')
.waitForElementVisible('body', 3000)
.url(function(response){
console.log('the url is', response.value);
this.assert.urlContains(response.value, 'news-mobile')
})


The above click failed because my url does not change. I can see that from my console. And after a successful click. The class turn to
mobile-nav-btn active
. Below is how I attempt to verify that. It also failed

.verify.elementPresent('a[class="mobile-nav-btn active"][href="news-mobile"]')


How do I achieved those? Any help would be appreciated.

Answer

What should work for you

change

.click('a[class="mobile-nav-btn"][href="/news-mobile"]')
.waitForElementVisible('body', 3000)
.url(function(response){
      console.log('the url is', response.value);
      this.assert.urlContains(response.value, 'news-mobile')
})

to

.click('a.mobile-nav-btn[href="/news-mobile"]')
.waitForElementVisible('body', 3000)
.url(function(response){
     this.assert.urlContains(response.value, 'news-mobile')
})

And

.verify.elementPresent('a[class="mobile-nav-btn active"][href="news-mobile"]')

to

.assert.cssClassPresent('a.mobile-nav-btn[href="/news-mobile"]','active')

Your test failed because you are using the selectors wrong.

Comments