nightwatch js中的元素无法定位错误

Question

I want to confirm that each my string have text 'Operational'. Here is my code

module.exports = {

test: function (client) {

    var text1;

    client
        .maximizeWindow()
        .url('https://status.gitlab.com/')
        .waitForElementVisible('img[alt="Logo"]', 10 * 1000)
        .elements('css selector', '.component',
            function (elements) {
                elements.value.forEach(function (elementsObj) {
                    client.elementIdText(elementsObj.ELEMENT, function (result) {
                        text1 = result.value
                        text1 = text1.replace(/\s+/g, '')
                        console.log(text1);
                        client.assert.containsText(text1, 'Operational')

                    })

                })
            })
}
};

When I run this I receive error - Testing if element <WebsiteGoogleComputeEngineOperational> contains text 'Operational' in 5000ms - expected "contains text 'Operational'" but got: "element could not be located" (5341ms)

When I run without client.assert.containsText(text1, 'Operational') I receive full list of my strings

WebsiteGoogleComputeEngineOperational
APIGoogleComputeEngineOperational
Git(sshandhttps)GoogleComputeEngineOperational
PagesGoogleComputeEngineOperational
CI/CDGoogleComputeEngineOperational
BackgroundProcessingGoogleComputeEngineOperational
SupportServicesZendeskOperational
packages.gitlab.comAWSOperational
customers.gitlab.comAzureOperational
version.gitlab.comAWSOperational
forum.gitlab.comDigitalOceanOperational
WindowsRunners(beta)GoogleComputeEngineOperational
CanaryGoogleComputeEngineOperational
dashboards.gitlab.comGoogleComputeEngineOperational

Where is the problem and how I can resolve this?

Answer 1

You cannot use client.assert.containsText(text1, 'Operational') as this is meant for validating the innertext of the element. What you're doing is comparing two texts for which you can use a simple if- else.

module.exports = {

  test: function(client) {

    var text1;

    client
      .maximizeWindow()
      .url('https://status.gitlab.com/')
      .waitForElementVisible('img[alt="Logo"]', 10 * 1000)
      .elements('css selector', '.component',
        function(elements) {
          elements.value.forEach(function(elementsObj) {
            client.elementIdText(elementsObj.ELEMENT, function(result) {
              text1 = result.value.replace(/\s+/g, '')
              if (text1.includes('Operational')) {
                console.log('Found Operational in - ' + '"' + text1 + '"' + '\n')
              } else {
                console.log('Didn\'t Found Operational in - ' + '"' + text1 + '"' + '\n')
              }
            })

          })
        })
  }
};

Upon Execution, you can see something like this in console -