Cypress E2E testing difficulties

[a]

I'm trying to use cypress to automate creating a new record and is having lots of difficulty. I am testing using a GridComponent with React.

1. when I automate clicking the 'Add' button, there is still a spinner in the background.
2. Even thought the dialog is the only dialog on the page, cy.get(`div.e-footer-content button.e-flat.e-btn.e-primary`) returns three (3) buttons: 2 with $btn.text() == 'OK' and 1 with $btn.text() == 'Save'
3. if ($btn.text() == 'Save') button.click({force: true, multiple: true}) does nothing. When I click the button on the cypress interface, nothing happens
   

This is my code

cy.get(`button#grid_add`).click({force: true})
cy.wait(100);
cy.get(`input#gridtag`).type(tagName, {timeout: 0, delay: 0, force: true})

cy.get(`div.e-footer-content button.e-flat.e-btn.e-primary`).each(($btn, index) => {
  const button = cy.wrap($btn);

  if ($btn.text() == 'Save')
    button.click({force: true, multiple: true})
});

Here is a screenshot of the dialog when open.

If I close the dialog the spinner is spinning as below:

I saw that you support cypress E2E tests but is there examples or recommendations/suggestion for automating actions using cypress (https://www.cypress.io/)?

[Rajapandi Ravi]

Hi Customer,

Greetings from Syncfusion support

Currently we are working on your query with your shared information(Cypress E2E testing difficulties), and we will update you the details on or before 5^th Oct 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Customer,

Thanks for your patience.

We have prepared a simple sample with a cypress testing case for React Grid component, and it is working fine. Please find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-898673973.zip

 

[app.js]

export default class App extends React.Component {

    data = [];

    render() {

        return (<div>

            <ButtonComponent id="btn">Button</ButtonComponent>

            <GridComponent id="Grid" dataSource={this.data} height='350'>

                <ColumnsDirective>

                   <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>

                   <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>

                </ColumnsDirective>

             </GridComponent>

            </div>);

    }

}

 

 

[button.cy.js]

import App from '../../src/App';

 

describe('button.cy.js', () => {

  const btnSelector = '[id=btn]'

  const emptyrowSelector = '[class=e-emptyrow]'

  const inputElem = '[id=GridOrderID]'

 

  it('mounts', () => {

    cy.mount(<App />)

    cy.get('button')

    cy.get(btnSelector).should('have.text', 'Button')

  })

  it('Empty Grid', () => {

    cy.mount(<App />)

    cy.get(emptyrowSelector).should('have.text', 'No records to display')

  })

  it('toolbarclick', () => {

    cy.mount(<App />)

    cy.get('.e-add').click({force: true})

    cy.get(inputElem).type(10248)

    cy.get(`div.e-footer-content button.e-flat.e-btn.e-primary`).each(($btn, index) => {

      const button = cy.wrap($btn);

   

      if ($btn.text() == 'Save')

        button.trigger("click");

    });

  })

}) 

Kindly refer to the below documentation for more information,

Documentation: https://docs.cypress.io/guides/component-testing/quickstart-react

Regards,

Rajapandi R

[a]

I am using a custom graphql adapter. I think my issue is that I am trying to add a new row before the grid fetching from the api. Which would explain why the spinner is spinning even while new dialog appears.  Is there some timeout option?

[Rajapandi Ravi]

Hi Customer,

Currently, we are validating your query with your shared information, and we will update you the details on or before 11^th Oct 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[a]

I figured out my issue. In modern browsers you can omit the protocol from the url, unfortunately that doesn't work within iframes which cypress uses.  If you have the resources, you should really consider pattern utilizing cypress e2e tests. right now I'm running into an issue with multiselectcomponent where selecting an option does not trigger the on

[Rajapandi Ravi]

Hi Customer,

We request you to provide additional details about the query as mentioned below, This will help us validate the query further and provide you with a better solution.

1. Is the MultiSelect component rendered within any other component or alone?

2. Whether the reported issue occurs while rendering the MultiSelect component alone?

3. Issue reproducing runnable sample.

4. Issue replication steps.

5. Video illustration of the issue.

Regards,

Rajapandi R