Current filter:
                                You should refresh the page.
                                  • I want to create a test for a master-detail ASPxGridView using TestCafe wrappers. How to do this?

                                1 Solution

                                Creation Date Importance Sort by

                                The information in this article describes TestCafe v1. This product is no longer available and has been replaced by TestCafe Studio. TestCafe Studio is our new cross-platform IDE for end-to-end web testing. To learn more about TestCafe Studio, please visit www.devexpress.com/testcafestudio.

                                To get started with TestCafe wrappers and create a test for a master-detail ASPxGridView with them, do the following:

                                - Download and unpack a .zip archive to any folder on your machine;
                                - Move the "wrappers" folder to the directory that contains your TestCafe tests. So, the test and wrapper folder must be located at the same directory level. 
                                - Define the module section in the Directory Configuration File file as shown below:

                                [XML]
                                "modules": { "dx": [ "../wrappers/dx.js", "../wrappers/web/ASPxGridViewWrapper.js" ] }

                                - Record a test using the TestCafe recorder (also, watch the Online Video Tutorial);
                                - Modify the test logic with the TestCafe editor by clicking the Pencil icon within TestCafe’s Control Pane or with any editor including Visual Studio, Sublime Text or even Notepad. 

                                            - Reference the wrapper files in your test using the "@require" directive:

                                [JavaScript]
                                "@require :dx";

                                            - The recorder already generated the required selectors and actions, so you only need to replace jQuery selectors with corresponding ASPxGridViewWrapper functions (see the ASPxGridViewWrapper API here):

                                You can also review this video that demonstrates how to perform all the described steps and see the test run result.

                                Here is a complete sample to test the ASPxGridView: Master-Detail demo page:

                                [JavaScript]
                                "@fixture Master Detail test"; "@page https://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx"; "@require :dx"; "@test"["master-detail test"] = { '1.Check if a detail row visible': function() { var detailDataRowsCount = getGrid().getDetailRows().length; eq(detailDataRowsCount, 1); }, '2. Expand the second row': function() { act.click(getGrid().getDetailButtons()[1]); }, '3.Check if two detail grids are visible': function() { var detailDataRowsCount = getGrid().getDetailRows().length; eq(detailDataRowsCount, 2); }, '4.Collapse the first row': function() { act.click(getGrid().getDetailButtons()[0]); }, '5.Collapse the second row': function() { act.click(getGrid().getDetailButtons()[1]); }, '6.Check if there is no visible detail grids': function() { var detailDataRowsCount = getGrid().getDetailRows().length; eq(detailDataRowsCount, 0); }, '7.Click the "Keep a single expanded row at a time" check box': function() { act.click("#ContentHolder_chkSingleExpanded_S_D"); }, '8.Expand the first row': function() { act.click(getGrid().getDetailButtons()[0]); }, '9.Expand the second row': function() { act.click(getGrid().getDetailButtons()[1]); }, '10.Check the "Allow single row to be expanded" property': function() { var detailDataRowsCount = getGrid().getDetailRows().length; eq(detailDataRowsCount, 1); } }; // helpers var getGrid = function(){ return dx.grid("grid"); };