Futures API 示例

本指南旨在提供一些关于如何使用 Futures API 的示例，并应有助于说明它们在测试 Web 应用程序时是多么强大和灵活。

Ext JS 和 ExtReact 示例

在网格中显示行

如何使用 .reveal() API 滚动到（显示）网格中的特定行。

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#big-data-grid

describe('Grid row reveal', function() {
    it('should scroll to a row in the grid', function() {
        ST.grid('big-data-grid')
            .rowAt(50)
            .reveal();
    });
});

获取网格行的记录

如何从 Store 中获取网格行的底层记录，并断言其中一个值是正确的。

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#array-grid

describe('Grid data check', function() {
    it('should contain correct data in the row', function() {
        ST.grid('[title="Basic Grid"]')
            .rowAt(3)
            .getRecord()
            .and(function(row) {
                // Option 1:
                expect(row.data.record.price).toEqual(89.96);

                // Option 2:
                expect(this.future.data.record.price).toEqual(89.96);
            });
    });
});

通过列菜单过滤网格

如何与网格列的菜单交互，定义过滤器，并检查从后端返回的正确数据。

注意：WebDriver 示例

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#grid-filtering

describe('Grid filtering', function() {
    var rowCount;

    it('should add a filter to a column', function() {
        var driver = ST.defaultContext.driver;

        // This code moves the mouse over one of the column's headers which
        // shows the trigger to display the column menu
        ST.element('gridcolumn[text="Company"] => .x-column-header-text-container')
            .get('id')
            .and(function() {
                driver.moveToObject('#' + this.future.data.id);
            });

        // This clicks the column header trigger which displays the column menu
        ST.element('gridcolumn[text="Company"] => .x-column-header-trigger')
            .click();

        // This references the column header menu and clicks the "Filters" item
        // to show the "Filters" sub-menu, then enters a value in to the text
        // field within the filter sub-menu
        ST.component('menu[activeHeader]')
            .gotoComponent('menuitem[text="Filters"]')
            .click()
            .gotoTextField('textfield')
            .focus()
            .type('Inc')
            .wait(1000);    // Filtering has a delay

        // Click away from the column menu to hide it
        ST.component('grid-filtering header')
            .click(); 
    });

    it('should find the grid and get the row count', function() {
        ST.grid('grid-filtering')
            .execute(function(grid) {
                // This function inside of ".execute" runs in the context of 
                // the browser.
                // Get the number of rows in the grid by getting the Store count
                return grid.getStore().getCount(); 
            })
            .and(function(future) {
                rowCount = future.data.executeResult;
            });
    });

    it('Should check the record count', function() {
        // You could check the correct number of records are being returned
        // from your back end when the filter is applied
        expect(rowCount).toEqual(10);
    });

    it('Should check the dataset', function() {
        // You could check the correct records are being returned
        // when your filter is applied
        for (var i = 0; i < rowCount; i ++) {
            // Check the content of each cell as needed
            ST.grid('grid-filtering')
                .rowAt(i)
                .cellAt(1)
                .textLike(/Inc/);
        }
    });
});

通过记录 ID 查找网格行并展开行

如何通过记录 ID 查找网格行，并展开行。

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#row-expander-grid

describe('Row click', function() {
    it('should find a row with a record id of 4 and expand the row', function() {
        ST.grid('row-expander-grid')
            .rowWith('id', 4)
            .cellAt(0)
            .click();
    });
});

选择网格中的所有行

当使用复选框选择模型时，如何选择网格中的所有行。

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#checkbox-selection

describe('Grid tests', function() {
    it('should select all rows in the grid', function() {
        // Check all rows in the grid by clicking on CheckColumn header
        ST.component('grid[title="checkOnly: false"] checkcolumn')
            .click();
    });
});

检查 Toast 消息的文本

如何与 Ext JS Toast 消息交互，并检查其文本内容。

// URL: http://examples.sencha.com/extjs/latest/examples/kitchensink/?classic#toast-view

describe('Toast messages', function() {
    it('should show a toast message when button is clicked', function() {
        // Clicking the button shows a toast message
        ST.button('[text="Simple Toast"]')
            .click();

        // Reference the toast message and check its text
        ST.component('toast')
            .textLike(/Simple Toast/i);
    });
});

非 Sencha 框架示例

检查表格内容

如何使用 ST.table Future API 与表格交互，通过索引查找行，并检查文本内容。

// URL: http://the-internet.herokuapp.com/tables

describe('Table tests', function() {
    it('should find the correct values in the table', function() {
        // Find a row by index, and check text content of a cell
        ST.table('@table1')
            .rowAt(1)
            .cellAt(0)
            .textLike('Smith');
    });
});

获取元素的属性

如何引用页面中的元素，并检索/检查其某些属性。

// URL: http://the-internet.herokuapp.com/login

describe('Login form', function() {
    it('should have correct attributes on the form element', function() {
        // Example 1: get "action" attribute of HTML form
        ST.element('@login')
            .get('action')
            .and(function() {
                // Do something with the attribute value here
                expect(this.future.data.action).toContain('/authenticate');
            });

        // Example 2: check "method" attribute of HTML form
        ST.element('@login')
            .expect('method').toBe('post');
    });
});