Devextreme Data Grid Uses Dynamic IDs

[Pam]

We have a number of master/child data grids that I am having trouble testing.  The IDs are dynamic and I am unable to find a consistent way of accessing the master and child grids.  As an example, you can look at the demo on the Devextreme website.  https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/MasterDetailView/  This does have a static ID for the master, I can't find any examples that don't.  In my test, I will need to select at least two different master records by clicking the caret to open the child grids.  The demo is read only but I will need to add rows and enter data into my child records.  Do you have any suggestions?

[Plamen Mitrev]

Hello Pam,

Thank you for sharing details about your test scenario and providing a similar demo application. I analyzed it and recorded a sample test against the demo. Please add the attached test to an existing project and explore the code sample at the end of this message.

Since the master table is in an iFrame in this example, you need to identify the iFrame first by ID, source, name or index. Then, look for the master table in that iFrame and iterate it until you find the correct row to be expanded. This updates the DOM tree dynamically and nests the child table inside the table row element of the master table. You need to refresh the master table object, so it takes the current structure of the DOM tree and allows you to iterate in the child table.

For this example I just verified that one of the cells in the child table contains certain text and logged a message in the execution log. At this point, depending on your test scenario and the child table, you can perform another action or verification against it.

Test it on your end and let me know if you need any assistance, when you adapt the code you the real application under test. You have a support ticket opened as well and we can continue the discussion about the specifics of the application under test there.

Have a great day ahead!

            HtmlTableRow containerRow = null; //The variable that will store the row that contains the value cell and the expand cell
            
            //get the iFrame that contains the table by ID attribute
            FrameInfo info = new FrameInfo("demoFrame", null, null, 0);
            Browser frame = ActiveBrowser.Frames[info];
            
            //get the master table inside the iFrame            
            HtmlTable table1 = frame.Find.ByExpression<HtmlTable>("tagname=table", "tagindex=table:1");
            Assert.IsNotNull(table1);
    
            foreach (HtmlTableRow r in table1.AllRows)
            {
                //Go through all the cells to find the one that contains the value;
                //This assumes you won't know which column has the value.
               foreach(HtmlTableCell c in r.Cells) 
                {
                    if (c.TextContent.Equals("Robert")) //The value can be data-driven if you use code that will extract values from a datasource
                    {
                        containerRow = c.Parent<HtmlTableRow>(); //We want to get the row which has this cell   
                    }
                }
            }

            HtmlTableCell expand = containerRow.Cells[0]; //Get the cell with the expand feature
            expand.ScrollToVisible(ArtOfTest.WebAii.Core.ScrollToVisibleType.ElementCenterAtWindowCenter);
            expand.MouseClick();
            
            //Allow some time for the grid to update and refresh the master table, since it now has new content and structure
            System.Threading.Thread.Sleep(2000);                    
            table1.Refresh();
            
            //Get the child table in the master table
            HtmlTable table2 = table1.Find.ByExpression<HtmlTable>("tagindex=table:1");
            Assert.IsNotNull(table2);
            
            foreach (HtmlTableRow r in table2.AllRows)
            {
                //Go through all the cells to find the one that contains the value;
                //This assumes you won't know which column has the value.
               foreach(HtmlTableCell c in r.Cells) 
                {
                    if (c.TextContent.Equals("Decide on Mobile Devices to Use in the Field")) //The name can be data-driven if you use code that will extract values from a datasource
                    {
                        Log.WriteLine("Table row in nested table is found"); //You can perform actions, like in the master table
                        break;
                    }
                }
            }

Regards,
Plamen Mitrev
Progress Telerik

[Pam]

Thank you for the sample. I will see what I can do with it, but it is failing for me on line 62 when I run it.  With this:

Overall Result: Fail
------------------------------------------------------------
'8/12/2022 3:11:01 PM' - Executing test: 'MasterChildGrid', path: 'MasterChildGrid.tstest.'
'8/12/2022 3:11:01 PM' - Using .Net Runtime version: '4.0.30319.42000' for test execution. Build version is '2022.2.804.0'.
'8/12/2022 3:11:01 PM' - Starting execution....
'8/12/2022 3:11:05 PM' - Detected custom code in test. Locating test assembly: BOENext-AutomatedVisualTests-Telerik.dll.
'8/12/2022 3:11:05 PM' - Assembly Found: C:\Telerik Projects\BOENext\bin\BOENext-AutomatedVisualTests-Telerik.dll
'8/12/2022 3:11:05 PM' - Loading code class: 'BOENext_AutomatedVisualTests_Telerik.MasterChildGrid'.
------------------------------------------------------------
------------------------------------------------------------
'8/12/2022 3:11:05 PM' - Using 'EdgeChromium' version '104.0.1293.47' as default browser. 
'8/12/2022 3:11:05 PM' - Using Telerik Components Version: 'R32021'
'8/12/2022 3:11:06 PM' - 'Pass' : 1. Navigate to : 'https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/MasterDetailView/'
'8/12/2022 3:11:08 PM' - 'Pass' : 2. Wait for '1000' msec.
'8/12/2022 3:11:08 PM' - 'Fail' : 3. New Coded Step
------------------------------------------------------------
Failure Information: 
~~~~~~~~~~~~~~~
Exception thrown executing coded step: 'New Coded Step'.
InnerException:
System.NullReferenceException: Object reference not set to an instance of an object.
   at BOENext_AutomatedVisualTests_Telerik.MasterChildGrid.MasterChildGrid_CodedStep() in c:\Telerik Projects\BOENext\MasterChildGrid.tstest.cs:line 62
------------------------------------------------------------
'8/12/2022 3:11:08 PM' - Detected a failure. Step is marked 'ContinueOnFailure=False' aborting test execution.
------------------------------------------------------------
'8/12/2022 3:11:08 PM' - Overall Result: Fail
'8/12/2022 3:11:08 PM' - Duration: [0 min: 2 sec: 856 msec]
------------------------------------------------------------
'8/12/2022 3:11:08 PM' - Test completed!

 

[Plamen Mitrev]

Hello Pam, thank you for trying the attached test and sample code. It looks like the table does not exist yet in the DOM tree at the time of the test execution. I would advise you to increase the execution delay in the second step to 5000 msec or until the iFrame that contains the table is fully loaded. I also added the code below after line 59 to check if the iFrame is not null.

Assert.IsNotNull(frame);

If you continue to experience any troubles, please export the step failure details and attach the zip to this post. Thank you!

[Pam]

I will try that.  I also need to add a new row and fill in the cells.  Can you give me an idea of how to enter cell values on a new row?   Thank you.

[Plamen Mitrev]

Please take your time to test the suggestion and share more details, if the issue persists. 

If you want to type text in a cell, you need to first click it, like we clicked the button in "Expand" cell. Then, use the code sample in this article to type text from the keyboard. Repeat those steps for all cells, where you can use some iterative process to go through all cells in that row.