Waiting for changes

Wait for content change

If you want to wait for some DOM mutation (ex. replace or modification of content made by js/ajax) you can use a dedicated watcher that observes DOM changes.

private static void TestListFilter(IBrowserAdapter browser)
{    
    //Interact with page
    var listFilterForm = browser.GetForm<ListFilterVM>(SampleListUIElementsIds.Filter);
    listFilterForm.SetFieldValue(x => x.Name, "test");
 
    //Create a changeWatcher and start observing
    var listWatcher = browser.WatchForContentChange(SampleListUIElementsIds.List);
 	
    //Perform action that should have impact on element with id SampleListUIElementsIds.List
    listFilterForm.ClickOnElementWithText("Search");
    
    //Wait untilt DOM change
    listWatcher.WaitForChange();
}

Instead of creating watcher and awaiting each time you can use AffectElementWith method which represents pattern StartObserving-Perform-WaitForChange

private static void TestListFilter(IBrowserAdapter browser)
{
    //Interact with page
    var listFilterForm = browser.GetForm<ListFilterVM>(SampleListUIElementsIds.Filter);
    listFilterForm.SetFieldValue(x => x.Name, "test");

    //Perform action and wait until given element will change
    browser.AffectElementWith(SampleListUIElementsIds.List, () => listFilterForm.ClickOnElementWithText("Search"));
}

To await for page fragment changes use AffectWith method

private static void TestListDeleteItem(IBrowserAdapter browser)
{
    var list = browserAdapter.GetListWithId("SampleList");
    var itemToDelete = list.FindItemWithText("Item to delete");

    //Perform action and wait until given element will change
    list.AffectWith(() => itemToDelete.ClickOnElementWithText("Delete"));
}

By default all of above methods watch for any changes on give element as also on subtree. If you are only interested in changes which occur directly on given element (for example full content replace) set watchSubtree parameter to false.

private static void TestFormSubmit(IBrowserAdapter browser)
{
    //Interact with page
    var form = browser.GetForm<ApplicationVM>("SampleForm");
    form.SetFieldValue(x => x.Name, "test");

    //Perform action and wait until content of element with id "SampleFormContainer" is replaced.
    //All changes inside subtree (for example attributes' modification on inputs cause by validation mechanism) will be ignored.
    browser.AffectElementWith("SampleFormContainer", ()=> form.ClickOnElementWithTex("Submit"), watchSubtree: false)
}

If given action can cause a page reload you should use ReloadPageWith method

private static void TestListFilter(IBrowserAdapter browser)
{
    //Interact with page
    var listFilterForm = browser.GetForm<ListFilterVM>(SampleListUIElementsIds.Filter);
    listFilterForm.SetFieldValue(x => x.Name, "test");

    //Perform action and wait until page will reload
    browser.ReloadPageWith(() => listFilterForm.ClickOnElementWithText("Search"));
}