Checking the text both before and after clicking a link by using a method such as content verification

Question

Checking the text both before and after clicking a link by using a method such as content verification

Currently, I am encountering an issue with validating the text on my links before and after they are clicked.

If the link text reads "one two" before clicking and remains as "one two" after the click, then the test case passes. However, if the text changes to "two one" after the click, the test case fails.

I have tried using

expect(beforeClick).toContain(afterClick)

and

expect(beforeClick).matches(afterClick)

, but both methods do not seem to work for me. Therefore, I am in search of a simpler method like just containing the text.

Do you know of any alternative approach that could help with this situation?

verifyLinks() {

    var allLinks = element.all(by.css('div>h3>a'));

    browser.sleep(15000); // added for debugging purposes to wait for page loading.

    allLinks.count().then(function (length) {

        console.log('Number of links: ' + length);

        for (let i = 0; i < length; i++) {


            allLinks.get(i).getText().then(function (linkTextBeforeClick) {

                var string = linkTextBeforeClick.replace(/\(|,/g, '');
                var textBeforeClick = string.replace(/\)|,/g, '');

                console.log("Before Click Text:" + textBeforeClick);
                allLinks.get(i).click();

                browser.sleep(5000);

                element(by.css('div>h2')).getText().then(function (linkTextAfterClick) {

                    var string = linkTextAfterClick.replace(/\(|,/g, '');
                    var textAfterClick = string.replace(/\)|,/g, '');

                    console.log("After Click Text:" + textAfterClick);

                    expect(textBeforeClick).toContain(textAfterClick);
                })

                browser.navigate().back();
            })

        }



    })
}

typescript protractor

Answer 1

Answer №1

For those utilizing the powerful async/await method (a highly recommended practice that simplifies writing sequential tests in an asynchronous environment), the code snippet below demonstrates its application:

const link = getElement(...);

const initialText = await link.getText();

await link.click()

const newText = await link.getText();

expect(initialText).toEqual(newText);

Answer 2

For those utilizing the powerful async/await method (a highly recommended practice that simplifies writing sequential tests in an asynchronous environment), the code snippet below demonstrates its application:

const link = getElement(...);

const initialText = await link.getText();

await link.click()

const newText = await link.getText();

expect(initialText).toEqual(newText);

Answer 3

Answer №2

checkLinks() {
  let allLinks = element.all(by.css('div>h3>a'));

  allLinks.count().then(function(count){
    console.log('Number of links:', count);

    for(let i=0;i<count;i++) {

      let beforeText = extractLinkText(allLinks.get(i));
      allLinks.get(i).click();
      browser.sleep(5000);

      let afterLink = element(by.css('div>h2'); 
      // Confirm that the locator for finding the link after click is correct.

      let afterText = extractLinkText(afterLink);

      Promise.all([beforeText, afterText])
             .then(function(txts){
               console.log('Link text before click:', txt[0]);
               console.log('Link text after click:', txt[1]);
               expect(txt[0]).toEqual(txt[1]);
             });

      browser.navigate().back();
      browser.sleep(5000);
    }
  });
}

extractLinkText(link) {
  return link.getText().then(function(str){
    return str.replace(/\(|,/g, '').replace(/\)|,/g, '').trim();
  });
}

Answer 4

checkLinks() {
  let allLinks = element.all(by.css('div>h3>a'));

  allLinks.count().then(function(count){
    console.log('Number of links:', count);

    for(let i=0;i<count;i++) {

      let beforeText = extractLinkText(allLinks.get(i));
      allLinks.get(i).click();
      browser.sleep(5000);

      let afterLink = element(by.css('div>h2'); 
      // Confirm that the locator for finding the link after click is correct.

      let afterText = extractLinkText(afterLink);

      Promise.all([beforeText, afterText])
             .then(function(txts){
               console.log('Link text before click:', txt[0]);
               console.log('Link text after click:', txt[1]);
               expect(txt[0]).toEqual(txt[1]);
             });

      browser.navigate().back();
      browser.sleep(5000);
    }
  });
}

extractLinkText(link) {
  return link.getText().then(function(str){
    return str.replace(/\(|,/g, '').replace(/\)|,/g, '').trim();
  });
}

Checking the text both before and after clicking a link by using a method such as content verification

Answer №1

Answer №2

Similar questions

Initiate asynchronous ngOnInit

React Hook Form: Reset function triggers changes across all controllers on the page

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

Angular8 Material Grid displaying headers and tiles, experiencing slight resizing issue with mat-grid-tile content

Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

Will the async pipe activate onPush change detection in Angular?

How can a secondary property type be determined by the key utilized in another property?

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Angular application triggering multiple subscribe method calls upon a link click event

We are unable to update the document in AngularFire as the document reference ID could not be retrieved

Develop a universal function for inserting information into an array within a data set

Unable to alter Mui input label color upon focus using theme.ts

When utilizing the useRef hook in Material-UI, an error may arise stating: "The property 'value' is not found on the type 'never'."

The necessity for one type argument is apparent in a generic type, particularly when it is divided into a distinct type

Angular2 - error in long-stack-trace-zone.js at line 106: Zone variable is not defined

Dealing with conflicting tsconfig.json files: Utilizing CommonJS for Node.js and ES6 for React.js

How can we verify if a React component successfully renders another custom component that we've created?

How can I specify the type of an object in Typescript to mirror a class's properties as a list?

Remove a record from Angular 2 Firebase collection