Results 1 to 4 of 4

Thread: Debugging futures

  1. #1
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    17
    Answers
    1

    Default Answered: Debugging futures

    We have many WebDriver tests that verify the contents of certain things, especially grids and trees, with the ST futures.
    These are great when they work but I'm having a terrible time debugging what is actually going on when the test encounters a timeout trying to match the content. I haven't figured out how to get a handle on or peek into what the elements actually contain.

    For example, I have a test that verifies the contents of the first row/cell in a grid as follows

    Code:
    ST.grid('#gridItemId').rowAt(0).cellAt(0).contentLike(/regex content/);
    I know the cell is there because if I remove the contentLike clause from the code it passes/does not time out. However when I get my regex wrong at all or if something changes in the view causing the text not to match, troubleshooting what's wrong is a bear.

    Assuming I have a future containing an element (e.g. an ST.future.cell), how would you recommend getting a handle on the content of an element and matching it to an expected value in such a way that when there is not a match I am able to see what is wrong and not just experience a timeout?

  2. If you are looking to debug the text content of the cell, you can use the "get" method to get the "textContent" or "innerHTML" (depending on which you want to work with) then use an "and" right after and place a "debugger" statement in there. You can then launch the tests in debug mode and this will cause a breakpoint to be hit once the value is obtained from the cell, allowing you to inspect it. You can also place a Jasmine "expect" within the function, and the test results will show the actual and expected values in the result for the test.

    Here is an example:

    Code:
    // WebDriver scenario URL: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/frame-index.html#array-grid
    
    describe('Grid Cells', function() {
        it('should do something with the cell text', function() {
            ST.grid('array-grid')
                .rowAt(3)
                .cellAt(0)
                .get('textContent')
                .and(function(future) {
                    debugger;   // When you launch the tests in Debug mode (by clicking the Debug button), a breakpoint will be hit here.
                    
                    expect(future.data.textContent).toEqual('Twitterbeat');
                });
        });
    });
    After the test has finished running, you can click on the green check mark of the test under the results to see the message "Expected 'Twitterbeat' to equal 'Twitterbeat'". So using the Jasmine "expect", like in the example above, provides another mechanism to see the actual and expected value without launching the tests in debug mode.

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    375
    Answers
    66

    Default

    If you are looking to debug the text content of the cell, you can use the "get" method to get the "textContent" or "innerHTML" (depending on which you want to work with) then use an "and" right after and place a "debugger" statement in there. You can then launch the tests in debug mode and this will cause a breakpoint to be hit once the value is obtained from the cell, allowing you to inspect it. You can also place a Jasmine "expect" within the function, and the test results will show the actual and expected values in the result for the test.

    Here is an example:

    Code:
    // WebDriver scenario URL: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/frame-index.html#array-grid
    
    describe('Grid Cells', function() {
        it('should do something with the cell text', function() {
            ST.grid('array-grid')
                .rowAt(3)
                .cellAt(0)
                .get('textContent')
                .and(function(future) {
                    debugger;   // When you launch the tests in Debug mode (by clicking the Debug button), a breakpoint will be hit here.
                    
                    expect(future.data.textContent).toEqual('Twitterbeat');
                });
        });
    });
    After the test has finished running, you can click on the green check mark of the test under the results to see the message "Expected 'Twitterbeat' to equal 'Twitterbeat'". So using the Jasmine "expect", like in the example above, provides another mechanism to see the actual and expected value without launching the tests in debug mode.
    Daniel Gallo
    Sales Engineer
    Sencha

  4. #3
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    17
    Answers
    1

    Default

    Excellent thank you.

    Is there a place where all of the things I can "get" for each future are documented?

  5. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    375
    Answers
    66

    Default

    The "get" method allows you to specify a list of comma-separated properties/configs that you want to retrieve from the Ext JS component or its underlying DOM element. See this part of the documentation for a few more details on the "get" method, and the order in which it searches for the properties on the component and underlying DOM element.
    Daniel Gallo
    Sales Engineer
    Sencha

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •