TypeScript mcagar.UiChains類代碼示例

UnitTest.asynctest('browser.tinymce.plugins.media.NoAdvancedTabTest', (success, failure) => {
  Plugin();
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Media: if alt source and poster set to false, do not show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          media_alt_source: false,
          media_poster: false,
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cNotExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ]),
    Log.chainsAsStep('TBA', 'Media: if alt source and poster not set to false, show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ])
  ], () => success(), failure);

});

UnitTest.asynctest('browser.tinymce.plugins.media.NoAdvancedTabTest', (success, failure) => {
  Plugin();
  Theme();

  Pipeline.async({}, [
    Logger.t('if alt source and poster set to false, do not show advance tab', Chain.asStep({}, [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          media_alt_source: false,
          media_poster: false,
          skin_url: '/project/js/tinymce/skins/lightgray'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'div[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.mce-floatpanel[aria-label="Insert/edit media"]'),
            cNotExists('div.mce-tab:contains("Advanced")')
          ]),
          Editor.cRemove
        ]
      )
    ])),
    Logger.t('if alt source and poster not set to false, show advance tab', Chain.asStep({}, [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          skin_url: '/project/js/tinymce/skins/lightgray'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'div[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.mce-floatpanel[aria-label="Insert/edit media"]'),
            cExists('div.mce-tab:contains("Advanced")')
          ]),
          Editor.cRemove
        ]
      )
    ]))
  ], () => success(), failure);

});

 const sOpenAndCloseDialog = (label) => {
   return GeneralSteps.sequence([
     Chain.asStep(editor, [
       tinyUi.cWaitForPopup('wait for dialog', `div:contains("${label}")`),
       UiChains.cCloseDialog('div[role="dialog"]')
     ]),
     Waiter.sTryUntil('Wait for dialog to close', UiFinder.sNotExists(TinyDom.fromDom(document.body), 'div[role="dialog"]'), 50, 5000)
   ]);
 };

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
    const tinyUi = TinyUi(editor);

    const cOpenDialog = Chain.fromChains([
      Chain.op(() => {
        return editor.execCommand('mceCodeEditor');
      }),
      tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
    ]);

    const cGetWhiteSpace = Chain.mapper(() => {
      const element = editor.getElement();
      return editor.dom.getStyle(element, 'white-space', true);
    });

    const cAssertWhiteSpace = () => {
      return NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cOpenDialog, 'element'),
        NamedChain.direct('element', cGetWhiteSpace, 'whitespace'),
        NamedChain.read('whitespace', Chain.op((whitespace) => {
          Assertions.assertEq('Textarea should have "white-space: pre-wrap"', 'pre-wrap', whitespace);
        }))
      ]);
    };

    const sAssertStyleExits = Chain.asStep({editor}, [
      cAssertWhiteSpace(),
      UiChains.cCloseDialog('div[role="dialog"]')
    ]);

    // Test verifies that new lines and whitespaces are allowed within the textarea in Firefox and IE
    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Code: Verify if "white-space: pre-wrap" style is set on the textarea', [
        sAssertStyleExits
      ])
    ], onSuccess, onFailure);
  }, {

UnitTest.asynctest('browser.tinymce.plugins.image.FigureResizeTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  ModernTheme();
  ImagePlugin();

  const cGetBody = Chain.mapper(function (editor) {
    return TinyDom.fromDom(editor.getBody());
  });

  const cGetElementSize = Chain.mapper(function (elm) {
    const elmStyle = elm.dom().style;
    return { w: elmStyle.width, h: elmStyle.height };
  });

  const cDragHandleRight = function (px) {
    return Chain.op(function (input) {
      const dom = input.editor.dom;
      const target = input.resizeSE.dom();
      const pos = dom.getPos(target);

      dom.fire(target, 'mousedown', { screenX: pos.x, screenY: pos.y });
      dom.fire(target, 'mousemove', { screenX: pos.x + px, screenY: pos.y });
      dom.fire(target, 'mouseup');
    });
  };

  Pipeline.async({}, [
    Chain.asStep({}, [
      Editor.cFromSettings({
        plugins: 'image',
        toolbar: 'image',
        indent: false,
        image_caption: true,
        height: 400,
        skin_url: '/project/js/tinymce/skins/lightgray'
      }),
      UiChains.cClickOnToolbar('click image button', 'div[aria-label="Insert/edit image"]'),
      UiChains.cFillActiveDialog({
        src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
        width: 100,
        height: 100,
        caption: true
      }),
      UiChains.cSubmitDialog(),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cGetBody, 'editorBody'),
        // click the image, but expect the handles on the figure
        NamedChain.direct('editorBody', UiFinder.cFindIn('figure > img'), 'img'),
        NamedChain.direct('img', Mouse.cTrueClick, '_'),
        NamedChain.direct(NamedChain.inputName(), ApiChains.cAssertSelection([], 0, [], 1), '_'),
        NamedChain.direct('editorBody', Chain.control(
          UiFinder.cFindIn('#mceResizeHandlese'),
          Guard.tryUntil('wait for resize handlers', 100, 40000)
        ), '_'),
        // actually drag the handle to the right
        NamedChain.direct('editorBody', UiFinder.cFindIn('#mceResizeHandlese'), 'resizeSE'),
        NamedChain.write('_', cDragHandleRight(100)),
        NamedChain.direct('img', cGetElementSize, 'imgSize'),
        NamedChain.direct('imgSize', Assertions.cAssertEq('asserting image size after resize', { w: '200px', h: '200px' }), '_'),
        NamedChain.output('editor')
      ]),
      Editor.cRemove
    ])
  ], function () {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.FigureResizeTest', (success, failure) => {

  SilverTheme();
  ImagePlugin();

  const cGetBody = Chain.control(
    Chain.mapper(function (editor: any) {
      return TinyDom.fromDom(editor.getBody());
    }),
    Guard.addLogging('Get body')
  );

  const cGetElementSize = Chain.control(
    Chain.mapper(function (elm: any) {
      const elmStyle = elm.dom().style;
      return { w: elmStyle.width, h: elmStyle.height };
    }),
    Guard.addLogging('Get element size')
);

  const cDragHandleRight = function (px) {
    return Chain.control(
      Chain.op(function (input: any) {
        const dom = input.editor.dom;
        const target = input.resizeSE.dom();
        const pos = dom.getPos(target);

        dom.fire(target, 'mousedown', { screenX: pos.x, screenY: pos.y });
        dom.fire(target, 'mousemove', { screenX: pos.x + px, screenY: pos.y });
        dom.fire(target, 'mouseup');
      }),
      Guard.addLogging('Drag handle right')
    );
  };

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: resizing image in figure', [
      McEditor.cFromSettings({
        theme: 'silver',
        plugins: 'image',
        toolbar: 'image',
        indent: false,
        image_caption: true,
        height: 400,
        base_url: '/project/tinymce/js/tinymce'
      }),
      UiChains.cClickOnToolbar('click image button', 'button[aria-label="Insert/edit image"]'),

      Chain.control(
        cFillActiveDialog({
          src: {
            value: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
          },
          dimensions: {
            width: '100px',
            height: '100px',
          },
          caption: true
        }),
        Guard.tryUntil('Waiting for fill active dialog', 100, 5000)
      ),
      UiChains.cSubmitDialog(),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cGetBody, 'editorBody'),
        // click the image, but expect the handles on the figure
        NamedChain.direct('editorBody', UiFinder.cFindIn('figure > img'), 'img'),
        NamedChain.direct('img', Mouse.cTrueClick, '_'),
        NamedChain.direct(NamedChain.inputName(), ApiChains.cAssertSelection([], 0, [], 1), '_'),
        NamedChain.direct('editorBody', Chain.control(
          UiFinder.cFindIn('#mceResizeHandlese'),
          Guard.tryUntil('wait for resize handlers', 100, 40000)
        ), '_'),
        // actually drag the handle to the right
        NamedChain.direct('editorBody', UiFinder.cFindIn('#mceResizeHandlese'), 'resizeSE'),
        NamedChain.write('_', cDragHandleRight(100)),
        NamedChain.direct('img', cGetElementSize, 'imgSize'),
        NamedChain.direct('imgSize', Assertions.cAssertEq('asserting image size after resize', { w: '200px', h: '200px' }), '_'),
        NamedChain.output('editor')
      ]),
      McEditor.cRemove
    ])
  ], function () {
    success();
  }, failure);
});

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);

    const doc = Element.fromDom(document);
    const body = Body.body();
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target: string) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

    const sAssertFocusOnItem = (label: string, selector: string) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

    const sCloseDialogAndWait = GeneralSteps.sequence([
      tinyUi.sWaitForPopup('wait for dialog', 'div[role="dialog"]'),
      Chain.asStep(editor, [
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil(
        'Wait for dialog to close',
        UiFinder.sNotExists(body, 'div[role="dialog"]'), 50, 5000
      )
    ]);

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

    // 'index' points to the context menuitems while 'subindex' points to the sub menuitems
    const sSelectContextMenu = (label: string, selector: string, index: number, subindex: number) => {
      return GeneralSteps.sequence([
        sOpenContextMenu('td'),
        sRepeatDownArrowKey(subindex),
        Keyboard.sKeydown(doc, Keys.right(), {}),
        sRepeatDownArrowKey(index),
        sAssertFocusOnItem(label, selector),
        sPressEnterKey
      ]);
    };

    const sSelectCellContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 0);
    const sSelectRowContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 1);
    const sSelectColumnContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 2);

    const tableHtml = '<table style="width: 100%;">' +
      '<tbody>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    const tableWithCaptionHtml = '<table style="width: 100%;">' +
      '<caption>Caption</caption>' +
      '<tbody>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    // Using a different table to test merge cells as selection using keydown (shift + arrow keys) does not work on Edge for some reason.
    // TODO: Investigate why selection does not work on Edge.
    const mergeTableHtml = '<table style="width: 100%;">' +
      '<tbody>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-first-selected="1">a1</td>' +
          '<td>a2</td>' +
        '</tr>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-last-selected="1">b1</td>' +
          '<td>b2</td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    const sAssertHtmlStructure = (label: string, expectedHtml: string) => Assertions.sAssertStructure(label, ApproxStructure.build((s) => {
      return s.element('body', {
        children: [
          ApproxStructure.fromHtml(expectedHtml),
          s.theRest()
        ]
      });
    }), editorBody);

//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.themes.mobile.EditorRemoveTest', (success, failure) => {
  const platform = PlatformDetection.detect();

  if (platform.browser.isIE() || platform.browser.isEdge()) {
    // No need to run mobile tests on IE/Edge as it's not supported
    return success();
  }

  mobileTheme();

  const cleanedThorAttrsStruct = (str) => {
    return {
      'position': str.none(),
      'background-color': str.none(),
    };
  };

  Pipeline.async({}, [
    Chain.asStep({}, [
      McEditor.cFromSettings({
        theme: 'mobile',
        inline: false,
        base_url: '/project/tinymce/js/tinymce'
      }),
      Chain.op((editor) => {
        const wrapperElm = Element.fromHtml('<div class="tinymce-editor"></div>');
        Selectors.one('#' + editor.id).each((textareaElm) => {
          Insert.wrap(textareaElm, wrapperElm);
        });
        Selectors.one('.tinymce-mobile-outer-container').each((editorElm) => {
          Insert.wrap(editorElm, wrapperElm);
        });
      }),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.writeValue('body', Body.body()),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click the tap to edit button', `.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Wait mobile Toolbar', `.${Styles.resolve('toolbar')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for The first group', '[aria-label="The first group"]'), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for the action group', '[aria-label="the action group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists('[aria-label="The read only mode group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists(`.${Styles.resolve('mask-edit-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click back to Tap to Edit screen', `.${Styles.resolve('icon-back')}`), '_'),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.outputInput
      ]),
      McEditor.cRemove,
      Chain.mapper(() => Body.body()),
      Assertions.cAssertStructure('Assert Thor overrides removed from body', ApproxStructure.build((s, str) => {
        return s.element('body', {
          attrs: cleanedThorAttrsStruct(str),
        });
      })),
      UiFinder.cFindIn('div.tinymce-editor'),
      Assertions.cAssertStructure('Assert Thor overrides removed from editor div', ApproxStructure.build((s, str) => {
        return s.element('div', {
          attrs: cleanedThorAttrsStruct(str),
          children: []
        });
      })),
      Chain.op((editorElm) => {
        Remove.remove(editorElm);
      })
    ])
  ], success, failure);
});

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);

    const doc = Element.fromDom(document);
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

    // Assert focus is on the expected menu item
    const sAssertFocusOnItem = (label, selector) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

    // Wait for dialog to open and close dialog
    const sWaitForAndCloseDialog = GeneralSteps.sequence([
      Chain.asStep(editor, [
        tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil(
        'Wait for dialog to close',
        UiFinder.sNotExists(TinyDom.fromDom(document.body), 'div[role="dialog"]'), 50, 5000
      )
    ]);

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

    const tableHtml = '<table style="width: 100%;">' +
    '<tbody>' +
      '<tr>' +
        '<td></td>' +
        '<td></td>' +
      '</tr>' +
      '<tr>' +
        '<td></td>' +
        '<td></td>' +
      '</tr>' +
    '</tbody>' +
    '</table>';

    const imgSrc = '../img/dogleft.jpg';

    const contentInTableHtml = (content: string) => {
      return '<table style="width: 100%;">' +
       '<tbody>' +
          '<tr>' +
            `<td>${content}</td>` +
          '</tr>' +
        '</tbody>' +
      '</table>';
    };

    const imageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100"/>');
    const placeholderImageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100" data-mce-placeholder="1"/>');
    const linkInTableHtml = contentInTableHtml('<a href="http://tiny.cloud/">Tiny</a>');

    // In Firefox we add a a bogus br element after the link that fixes a gecko link bug when,
    // a link is placed at the end of block elements there is no way to move the caret behind the link.
    const sAssertRemoveLinkHtmlStructure = Assertions.sAssertStructure('Assert remove link', ApproxStructure.build((s, str) => {
      return s.element('body', {
        children: [
          s.element('p', {
            children: [
              s.text(str.is('Tiny')),
              s.zeroOrOne(s.element('br', {}))
            ]
          })
        ]
      });
    }), editorBody);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Test context menus on empty editor', [
        sOpenContextMenu('p'),
        sAssertFocusOnItem('Link', '.tox-collection__item:contains("Link...")'),
        sPressEnterKey,
        sWaitForAndCloseDialog
      ]),
      Log.stepsAsStep('TBA', 'Test context menus on a link', [
        tinyApis.sSetContent('<p><a href="http://tiny.cloud/">Tiny</a></p>'),
        tinyApis.sSetSelection([ 0, 0, 0 ], 'Ti'.length, [ 0, 0, 0 ], 'Ti'.length),
        sOpenContextMenu('a'),
        sAssertFocusOnItem('Link', '.tox-collection__item:contains("Link...")'),
        sPressDownArrowKey,
        sAssertFocusOnItem('Remove Link', '.tox-collection__item:contains("Remove link")'),
        sPressDownArrowKey,
        sAssertFocusOnItem('Open Link', '.tox-collection__item:contains("Open link")'),
        sPressDownArrowKey,
//.........這裏部分代碼省略.........

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);
    const doc = Element.fromDom(document);
    const body = Body.body();

    const tableHtml = '<table style = "width: 5%;">' +
    '<tbody>' +
      '<tr>' +
        '<td></td>' +
      '</tr>' +
    '</tbody>' +
    '</table>';

    const sAddTableAndOpenContextToolbar = (html: string) => GeneralSteps.sequence([
      tinyApis.sSetContent(html),
      tinyUi.sWaitForUi('Wait for table context toolbar', '.tox-toolbar button[aria-label="Table properties"]'),
    ]);

    // Use keyboard shortcut ctrl+F9 to navigate to the context toolbar
    const sPressKeyboardShortcutKey = Keyboard.sKeydown(Element.fromDom(editor.getDoc()), 120, { ctrl: true });
    const sPressRightArrowKey = Keyboard.sKeydown(doc, Keys.right(), { });
    const sPressTabKey = Keyboard.sKeydown(doc, Keys.tab(), { });

    // Assert focus is on the expected toolbar button
    const sAssertFocusOnItem = (label: string, selector: string) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

    const sAssertButtonDisabled = (label: string, selector: string) => {
      return tinyUi.sWaitForUi(label, `.tox-pop__dialog ${selector}:disabled`);
    };

    const sClickOnToolbarButton = (selector: string) => {
      return Chain.asStep({}, [
        Chain.fromParent(tinyUi.cWaitForPopup('wait for context toolbar', '.tox-pop__dialog div'), [
          Chain.fromChains([
            UiFinder.cFindIn(selector),
            Mouse.cClick
          ])
        ])
      ]);
    };

    const sAssertHtmlStructure = (label, expectedHtml) => Chain.asStep({editor}, [ NamedChain.read('editor', Chain.op((editor) => {
      const elm = Replication.deep(Element.fromDom(editor.getBody()));
      Arr.each(SelectorFilter.descendants(elm, '*[data-mce-bogus="all"]'), Remove.remove);
      const actualHtml = Html.get(elm);
      Assertions.assertHtmlStructure(label, `<body>${expectedHtml}</body>`, `<body>${actualHtml}</body>`);
    }))]);

    const sOpenAndCloseDialog = GeneralSteps.sequence([
      Chain.asStep(editor, [
        tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil('Wait for dialog to close', UiFinder.sNotExists(body, 'div[role="dialog"]'), 50, 5000)
    ]);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Table: context toolbar keyboard navigation test', [
        sAddTableAndOpenContextToolbar(tableHtml),
        sPressKeyboardShortcutKey,
        sAssertFocusOnItem('Table properties button', 'button[aria-label="Table properties"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete table button', 'button[aria-label="Delete table"]'),
        sPressTabKey,
        sAssertFocusOnItem('Insert row above button', 'button[aria-label="Insert row before"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Insert row below button', 'button[aria-label="Insert row after"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete row button', 'button[aria-label="Delete row"]'),
        sPressTabKey,
        sAssertFocusOnItem('Insert column before button', 'button[aria-label="Insert column before"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Insert column after button', 'button[aria-label="Insert column after"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete column button', 'button[aria-label="Delete column"]'),
        sPressTabKey,
        sAssertFocusOnItem('Table properties button', 'button[aria-label="Table properties"]'),
        sClickOnToolbarButton('button[aria-label="Delete table"]'),
        sAssertHtmlStructure('Assert delete table', '<p><br></p>')
      ]),
      Log.stepsAsStep('TBA', 'Table: context toolbar functionality test', [
        sAddTableAndOpenContextToolbar(tableHtml),

        sClickOnToolbarButton('button[aria-label="Table properties"]'),
        sOpenAndCloseDialog,

        sClickOnToolbarButton('button[aria-label="Insert row before"]'),
        sAssertHtmlStructure('Assert insert row before', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Insert row after"]'),
        sAssertHtmlStructure('Assert insert row after', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Delete row"]'),
        sAssertHtmlStructure('Assert delete row', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Insert column before"]'),
//.........這裏部分代碼省略.........