Cypress: How to Copy/Paste single text word from string to paste later

user_17190184 0
Viewed 114

I am new to stackoverflow so apologies if this is a bit all over the place but I can't seem to find any easy answer online for what seems like a pretty small task! :(

I am trying to Copy some data from a pop-up, that says something like "Congrats, Your Ref (REF1234) completed successfully" (just the REF1234 part) and copy it to paste into another field on the next screen... This is what I have so far, which hopefully makes sense to someone...

export function addRefToThing() {    
  cy.get('[class="ref-success"]').find(':selected').contains('REF').then(($clipboard) => {
    const copiedRef = $clipboard[0]._vClipboard.clipboardAction.text;

// <<filler steps, moving around pages>> //

    webpage.RefNo().type(copiedRef)})

This is pretty much as far as I've been able to get and pulling my hair out ... Looks like it's getting caught up at -find :selected but not actually sure it's even copying the data I want...

I'm pretty new to cypress so this is proving pretty confusing and if anyone has any good training material regarding this kind of request, that'd be awesome! Thanks in advance!

HTML:

<div class="notification-group" style="width: 300px; bottom: 0px; right: 0px;">
   <span>
      <div data-id="1" class="notification-wrapper" style="transition: all 300ms ease 0s;">
         <div class="notification-template notification success">
            <div class="notification-title">Successful</div>
            <div class="notification-content">Ref (REF123456789) created successfully</div>
         </div>
      </div>
   </span>
</div>
cypress copy-paste testing automation javascript
2 Answers

Try it with a regex to parse the ref.

Using /\(REF([0-9]+)\)/ you get two matches,

  • matches[0] is the whole "(REF123456789)""
  • matches[1] is the inner group "123456789"
cy.get('div.notification-content')
  .then($el => $el.text().match(/\(REF([0-9]+)\)/)[1])  // parsing step
  .then(ref => {
    webpage.RefNo().type(ref)
  })

In your function,

export function addRefToRef() {    
  cy.get('[class="ref-success"]').find(':selected').contains('REF')
    .then(($clipboard) => {
      const copiedRef = $clipboard[0]._vClipboard.clipboardAction.text;
      const innerRef = copiedRef.match(/\(REF([0-9]+)\)/)[1];

      // <<filler steps, moving around pages>> //

      webpage.RefNo().type(innerRef)
    })
}
user_167915050

You can directly save the inner text value from the notification-content div and use it later. You don't have to use the clipboard method.

//Some code that will trigger the notification
cy.get('.notification-content')
  .should('be.visible')
  .invoke('text')
  .then((text) => {
    cy.log(text) //prints Ref (REF123456789) created successfully
  })

In case if you want to save it and then use it later in the test, you can use alias .as:

//Some code that will trigger the notification
cy.get('.notification-content')
  .should('be.visible')
  .invoke('text')
  .as('notificationText')
//Some other code
cy.get('@notificationText').then((notificationText) => {
  cy.log(notificationText) //prints Ref (REF123456789) created successfully
})

Or, if you want to assert the content:

  1. Exact match:
cy.get('.notification-content')
  .should('be.visible')
  .and('have.text', 'Ref (REF123456789) created successfully')
  1. Partial Match
cy.get('.notification-content')
  .should('be.visible')
  .and('include.text', 'REF123456789')

If you just want to extract the reference number then you have to first use split to get the second text and then use slice to remove the opening and closing brackets, something like this:

//Some code that will trigger the notification      
cy.get('.notification-content').should('be.visible').invoke('text').as('notificationText')
//Some other code
cy.get('@notificationText').then((notificationText) => {
  cy.log(notificationText.split(' ')[1].slice(1,-1))  //REF123456789 
})
user_45712710
Related