Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
static label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent in this example)( item ) in this example)Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).PROTECTED in
this example - see the Flags section below)Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source in the example)item : Object in the example).undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)Available since 3.4.0 - not pictured in
the example) just after the member descriptionDefaults to: false)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
classInstance.method1().method2().etc();false is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
This is the root namespace for the Sencha Test API.
A good place to start reading about the API is ST.future.Element which explains some basics about how to use the API and has examples. Also see ST.future.Component for details on interacting with Ext components.
The current version of IE (0 if the browser is not IE). This does not account for the documentMode of the current page, which is factored into isIE8, and isIE9. Thus this is not always true:
ST.isIE8 == (ST.ieVersion == 8)
True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
true if browser is using strict mode.
Defaults to:
document.compatMode === "CSS1Compat"
The ready gate is opened when the document is ready as well as Ext JS / Sencha Touch.
Defaults to:
new ST.Gate('ready')
Available since: 1.0.2
The testsReady gate is opened when all tests are described and ready to run.
Defaults to:
new ST.Gate('testsReady', 50)
Available since: 1.0.2
Schedules a wait for an element to be absent or missing from the DOM. This is typically used after some future action that should cause a removal.
ST.button('@okButton').click();
ST.absent('@confirmationWindow'); // the window owning the OK button
This method is similar to ST.future.Element#removed but the difference
is that this method does not first wait for the specified element to be found. This
difference makes this method suitable for checking for things that should not be
present in the first place.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the element to be removed.
Adds one or more allowable global variable names. Variable names can be simple names or a regex.
add : String/String[]
Registers a locator strategy for recording target locators. A locator strategy
implements a locate method. If the locator
parameter is a function, it is treated as an implementation of such a method.
For example:
ST.addLocatorStrategy(function (el, targets) {
if (el.id) {
targets.push('>> #' + el.id);
}
});
The above locator strategy is not very useful, but illustrates the process of adding new strategies.
strategy : ST.locator.Strategy/Function
Creates and returns an ST.Alert passing along the specified config object. This
method calls ST.Alert#show before returning the instance.
config : Object
The config object for an instance of ST.Alert.
Copies all the properties of config to the specified object.
ST.apply(obj = {}, { a: 1 });
// obj.a === 1
object : Object
The receiver of the properties.
config : Object
The primary source of the properties.
own : Boolean (optional)
Pass true to limit the copy to hasOwnProperty properties
of the config object.
returns object.
Copies all the properties of config to object if they don't already exist.
object : Object
The receiver of the properties
config : Object
The source of the properties
own : Boolean (optional)
Pass true to limit the copy to hasOwnProperty properties
of the config object.
returns obj
Capitalize the first letter of the given string.
string : String
Returns a new object with the given object as the prototype chain. This method is
designed to mimic the ECMA standard Object.create method and is assigned to that
function when it is available.
NOTE This method does not support the property definitions capability of the
Object.create method. Only the first argument is supported.
object : Object
The prototype chain for the new object.
Returns a ST.future.CheckBox used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Returns the class associated with the passed class name
name : String
The name of the class to retrieve
Returns a ST.future.ComboBox used to queue operations for
when that Ext.form.field.ComboBox becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the combobox.
Returns a ST.future.Component used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Configures a custom context. Configured methods can return promises if they perform asynchronous operations.
fn : Function/Object
The user function or a config object to apply to this
instance. The config object must contain an fn property with the user function.
timeout : Number (optional)
The timeout for fn to complete. If not specified, the
default timeout is used.
Returns a ST.future.DataView used to queue operations for
when that Ext.view.View becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the dataview.
Lower-cases the first letter of the given string.
string : String
Similar to setTimeout and Ext.defer this method schedules a call to the given
method after the given delay and returns an id that can be used to cancel the
request.
To cancel a timeout, call ST#deferCancel. Do not pass these id's to the DOM.
In some modern browsers (currently FF and Chrome timeouts are clamped to >= 1000ms for inactive tabs. https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Timeouts_in_inactive_tabs_clamped_to_>1000ms
This can result in much larger delays than expected when playing back recorded events since the Event Player is not guaranteed to be run in an active tab/window.
This class leverages Web Workers to emulate the browser's setTimeout and setInterval functionality without the undesirable clamping in incative tabs.
Falls back to window.setTimeout/setInterval where Web Workers are not available.
fn : Function
The function to call after delay milliseconds.
scope : Object (optional)
The this pointer to use for calling fn.
delay : Number
The number of milliseconds to delay before calling fn.
Defines a primitive class similar to the Ext JS class system. The following features are provided:
extendsingletonstatics (like ES6, all statics are inherited)data : Object/Function
The class body or a method that will return the class body. The method is passed the class constructor as its single argument.
onComplete : Function (optional)
Optional completion method. Since this method is
synchronous, onComplete is called immediately.
The class constructor
Waits for the document.readyState to be the specified state.
state : String
Defaults to: "complete"
timeout : Object
this
Iterates an array or an iterable value and invoke the given callback function for each item.
var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
ST.each(countries, function(name, index, countriesItSelf) {
console.log(name);
});
var sum = function() {
var sum = 0;
ST.each(arguments, function(value) {
sum += value;
});
return sum;
};
sum(1, 2, 3); // returns 6
The iteration can be stopped by returning false from the callback function.
Returning undefined (i.e return;) will only exit the callback function and
proceed with the next iteration of the loop.
ST.each(countries, function(name, index, countriesItSelf) {
if (name === 'Singapore') {
return false; // break here
}
});
iterable : Array/NodeList
The value to be iterated. TODO this fn param doc renders strange.... Function< /a>
fn : Function
The callback function. If it returns false, the iteration
stops and this method returns the current index. Returning undefined (i.e
return;) will only exit the callback function and proceed with the next iteration
in the loop.
scope : Object (optional)
The scope (this reference) in which the specified function
is executed.
reverse : Boolean (optional)
Reverse the iteration order (loop from the end to the beginning).
Defaults to: false
If no iteration returns false then this method returns true.
Otherwise this method returns the index that returned false. See description for
the fn parameter.
Returns a ST.future.Element used to queue operations for when that element becomes available (rendered to the page). The element does not need to be visible for this future to complete.
Once a future is returned from this method, it is typically used to describe some sequence of actions, wait for state transitions and perform inspections.
ST.element('@someEl').
click(10, 10).
textLike(/hello/i).
and(function (el) { ... });
locator : String
See ST.Locator for supported syntax.
timeout : Object
Executes the provided function in the browser under test. Be aware that with WebDriver scenarios the scope of the function is not related to the scope of the test code. The following will not work:
var foo = '1';
ST.execute(function () {
expect(foo).toBe(1);
});
Because the bar foo is in the test scope but the function is executed in the browser under test.
For in-browser scenarios the code above will work.
If the provided function returns a value it will be set on the current future's data as the property 'executeResult'.
ST.element('@some-div')
.execute(function () {
return 'foo';
})
.and(function (future) {
expect(future.data.executeResult).toBe('foo')
});
Similarly if any errors are thrown in the provided function the error will be set on the future's data as the property 'executeError'.
ST.element('@some-div')
.execute(function () {
throw 'foo';
})
.and(function (future) {
expect(future.data.executeError).toBe('foo')
});
For the function, the 1st argument will be the future value such as ST.Element or an Ext.Component or the future itself in the case of WebDriver scenarios. The scope of functions will be the playable event itself. To access the future use this.future.
fn : Function
the function to execute in the browser under test
this
Help write negative test cases by passing when some or all of the test results are failures.
This function can be used in a fluent chain or by itself. It schedules a check on the test results so far so can generally be used inside the test unless the test itself is expected to timeout, then it should be used in an afterEach function.
When called with no parameters all test results which are failures will be marked as passing and have 'Expected Failure: ' prepended to their message.
describe('failures', function () {
it('should pass', function () {
expect(1).toBe(2);
ST.expectFailure();
});
});
describe('no failures', function () {
it('should pass', function () {
expect(1).toBe(1);
ST.expectFailure();
});
});
Will result in the following messages:
Expected failure: Expected 1 to be 2.
Expected at least one failing result but found none.
It is also possible to specify one or more String or RegExp items to match errors specifically.
describe('match string and regexes', function () {
it('expects failure', function () {
expect(1).toBe(1);
expect(1).toBe(2);
expect('foo').toBe('bar');
ST.expectFailure([
/.*foo.*bar/,
'Expected 1 to be 2'
]);
});
});
Would result in three passing results for the test:
Expected 1 to be 1.
Expected failure: Expected 'foo' to be 'bar'.
Expected failure: Expected 1 to be 2.
One special case where you would need to use ST.expectFailure in an afterEach is when the test case you are expecting a failure in times out. For futures that timeout you can use the ST.future.Element#timedout method.actions
describe('suite', function () {
it('should timeout the entire test', function () {
ST.element().and(
500,
function (el,done) {
setTimeout(function () {
done();
},1000); // force a timeout
}
);
});
afterEach(function () {
ST.expectFailure();
});
});
Available since: 2.0.0
match : String/RegExp/String[]/RegExp[] (optional)
Optional set of messages to match
Returns a ST.future.Field used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Given the target locator string, return the matching element or null if one is not
found. See ST.Locator for a description of valid locator strings.
Alias for ST.Locator#find.
target : String
The target locator string.
wrap : Boolean (optional)
Pass true to return a wrapped ST.Element
instead of the raw DOM node.
Defaults to: false
root : HTMLElement/ST.Element/Ext.Component (optional)
direction : "down"/"up"/"child" (optional)
Defaults to: "down"
Given one of the various ways to identify a DOM node, this method returns a
temporary, fly-weight ST.Element or null. Instances returned by this
method should be used briefly to call the methods of the ST.Element and then
ignored since the instance will be re-used by future calls to this method.
domNode : String/HTMLElement/ST.Element/Ext.Element
flyName : String (optional)
An optional name for the fly. Passing a custom name can be used to control the scope of re-use of the returned instance.
Defaults to: "fly"
Given one of the various ways to identify a DOM node, this method returns a
temporary, fly-weight ST.Element or null. Each call to this method returns
a new ST.Element instance. Unlike Ext.get() this method does not maintain an
element cache nor does it assign an id to the element. In other words, this
method is equivalent to new ST.Element().
domNode : String/HTMLElement/ST.Element/Ext.Element
Given one of the various ways to identify a DOM node, this method returns the
DOM node or null.
domNode : String/HTMLElement/ST.Element/Ext.Element
Returns the first matching key corresponding to the given value. If no matching value is found, null is returned.
object : Object
value : Object
The value to find
Returns the current url of the target browser as the first arg of the provided callback function.
ST.navigate('https://duckduckgo.com') .getUrl(function (url) { expect(url).toContain('duckduckgo'); });
callback : Function
The callback function to execute when the url has been determined
this
Gets all values of the given object as an array.
object : Object
An array of values from the object
Returns a ST.future.Grid used to queue operations for
when that Ext.grid.Panel becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the dataview.
This method queues a function to be called when ST is ready to run.
fn : Function
Returns a ST.future.Panel used to queue operations for when that panel becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the panel.
Returns a ST.future.Picker used to queue operations for
when that Ext.form.field.Picker becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the picker.
Adds an array of events to the queue and optionally calls a done method when
the events have all been played.
events : ST.playable.Playable[]
The events to play.
done : Function (optional)
Optional function to call after the events have played.
future : Object (optional)
Optional ST.future.Element to associate with these events. // TODO what if an event changes the future??? :( How funny sounding...
The events array with each element now promoted
from config object to ST.playable.Playable instance.
Lazily creates and returns the shared ST.event.Player. This is rarely called directly, but is the underlying mechanism used the inject events using the ST#play and ST.future.Element API's.
Takes a snapshot of the viewport and compares it to the associated baseline image.
name : String
done : Function
Takes a snapshot of the viewport and compares it to the associated baseline image.
ST.element('@someEl').
click(10, 10).
screenshot();
Can also be used directly from the ST namespace and chained with other futures API methods:
ST.screenshot('first', 10, 10000). // tolerance=10 (10 pixels), timeout=10000 (10 seconds)
navigate('#somewhere').
screenshot('second', 20); // tolerance=20 (20 pixels), timeout=30000 (default)
It is possible to set the maximum number of different pixels the current snapshot can have compared to the baseline image before the method will cause the test to fail, by defining a tolerance:
ST.screenshot('first', 200); // Tolerance of 200 pixels (defaults to 0 if not explicitly set)
To support the 1.0.x API as well as for flexibility the second parameter can be a callback function, though the preferred usage is chaining as above.
ST.screenshot('third', function () {
// the screenshot has been taken!
});
name : String
for the snapshot filename. Default is an incremental number for the current test run.
callback : Object
tolerance : Object
timeout : Object
this
Returns a ST.future.Select used to queue operations for
when that Ext.field.Select becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the select field.
Replaces the locator strategies with those provided to this call. For details on locator strategy see addLocatorStrategy.
The following call would produce the default strategies:
ST.setLocatorStrategies(
new ST.locator.Strategy()
);
This method is used to control the presence and order of locator strategies. The order
is important to the ST.event.Recorder because the first locator strategy to produce
an element locator determines the default event target
and/or relatedTarget.
strategy : ST.locator.Strategy/Function
Sets the size of the browser viewport. This method has no effect on in-browser tests when the browser wasn't launched via WebDriver, and it is particulary useful to ensure that compared screenshots have the same dimensions.
ST.setViewportSize(1024, 768)
.screenshot();
width : Number
height : Object
this
Returns a ST.future.Slider used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Starts the ST.event.Recorder. Once this method is called all further test execution is halted.
This method is typically injected automatically by Sencha Test Studio when using its Event Recorder and is therefore rarely called directly.
config : Object
Options to configure the ST.event.Recorder.
done : Object
Starts the ST.event.Recorder. Once this method is called all further test execution is halted.
This method is typically injected automatically by Sencha Test Studio when using its Event Recorder and is therefore rarely called directly.
Starts the ST.event.Recorder. Once this method is called all further test execution is halted.
This method is typically injected automatically by Sencha Test Studio when using its Event Recorder and is therefore rarely called directly.
Returns a ST.future.Table used to queue operations for when that HTML table element becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the dataview.
Returns a ST.future.TextField used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Similar setTimeout but instead returns a function that cancels the timer.
The timeout value (millisec) defaults to ST.options.timeout unless that value
is set to 0 in which case timeouts are disabled. In that case, fn will never be
called.
fn : Function
The function to call after millisec milliseconds.
scope : Object (optional)
The this pointer to use for calling fn.
millisec : Number (optional)
The delay in milliseconds. Defaults to ST.options.timeout
and is disabled if that value is 0.
Returns a limited-use ST.future.Element that can be used only to wait and perform some manual steps.
Sencha Test | Terms of Use