CodeExplorer
You are a developer and looking for Shopware projects?
Apply Now!
waitForElementVisible example
$this->drupalGet('tour-test-1');
$assert_session->assertNoElementAfterWait('css', '.tip-tour-test-1');
$assert_session->pageTextContains('Where does the rain in Spain fail?');
$assert_session->pageTextNotContains('Im all these things');
$assert_session->pageTextNotContains('The first tip');
$this->drupalGet('tour-test-1', [
'query' => [
'tips' => 'tip-tour-test-6',
],
]);
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-6'));
$assert_session->pageTextContains('Im all these things');
$this->drupalGet('tour-test-1', [
'query' => [
'tour' => '1',
],
]);
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-1'));
$assert_session->pageTextContains('The first tip');
}
$assert_session->assertNoElementAfterWait('css', '.tip-tour-test-1');
$assert_session->pageTextContains('Where does the rain in Spain fail?');
$assert_session->pageTextNotContains('Im all these things');
$assert_session->pageTextNotContains('The first tip');
$this->drupalGet('tour-test-1', [
'query' => [
'tips' => 'tip-tour-test-6',
],
]);
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-6'));
$assert_session->pageTextContains('Im all these things');
$this->drupalGet('tour-test-1', [
'query' => [
'tour' => '1',
],
]);
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-1'));
$assert_session->pageTextContains('The first tip');
}
protected function configureInlineBlock($old_body, $new_body, $block_css_locator = NULL) {
$block_css_locator = $block_css_locator ?: static::INLINE_BLOCK_LOCATOR;
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->clickContextualLink($block_css_locator, 'Configure');
$textarea = $assert_session->waitForElementVisible('css', '[name="settings[block_form][body][0][value]"]');
$this->assertNotEmpty($textarea);
$this->assertSame($old_body, $textarea->getValue());
$textarea->setValue($new_body);
$page->pressButton('Update');
$assert_session->assertNoElementAfterWait('css', '#drupal-off-canvas');
$assert_session->assertWaitOnAjaxRequest();
$this->assertDialogClosedAndTextVisible($new_body);
}
/** * Asserts that the dialog closes and the new text appears on the main canvas. * * @param string $text * The text. * @param string|null $css_locator * The css locator to use inside the main canvas if any. */
protected $defaultTheme = 'stark';
/** * Tests that links respect 'data-dialog-renderer' attribute. */
public function testModalRenderer() {
$session_assert = $this->assertSession();
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Normal Modal!');
// Neither of the wide modals should have been used. $style = $session_assert->waitForElementVisible('css', '.ui-dialog')->getAttribute('style');
$this->assertStringNotContainsString('700px', $style);
$this->assertStringNotContainsString('1000px', $style);
// Tabbable should focus the close button when it is the only tabbable item. $this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog .ui-dialog-titlebar-close")');
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Wide Modal!');
$this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 700px;"]'));
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Extra Wide Modal!');
$this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 1000px;"]'));
/** * Tests that links respect 'data-dialog-renderer' attribute. */
public function testModalRenderer() {
$session_assert = $this->assertSession();
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Normal Modal!');
// Neither of the wide modals should have been used. $style = $session_assert->waitForElementVisible('css', '.ui-dialog')->getAttribute('style');
$this->assertStringNotContainsString('700px', $style);
$this->assertStringNotContainsString('1000px', $style);
// Tabbable should focus the close button when it is the only tabbable item. $this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog .ui-dialog-titlebar-close")');
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Wide Modal!');
$this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 700px;"]'));
$this->drupalGet('/dialog_renderer-test-links');
$this->clickLink('Extra Wide Modal!');
$this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 1000px;"]'));
$page->findField('page[create]')->click();
// Test if the title and path have been populated. $this->assertEquals($label_value, $page->findField('page[title]')->getValue());
$this->assertEquals(str_replace(' ', '-', $label_value), $page->findField('page[path]')->getValue());
// Create a menu item. $page->findField('page[link]')->click();
$this->assertEquals($label_value, $page->findField('page[link_properties][title]')->getValue());
// Wait for conditional field to show. $this->assertSession()->waitForElementVisible('named', ['select', 'page[link_properties][parent]']);
// Assert a menu can be selected as a parent. $this->assertSession()->optionExists('page[link_properties][parent]', 'admin:');
// Assert a parent menu item can be selected from within a menu. $this->assertSession()->optionExists('page[link_properties][parent]', 'admin:entity.view.collection');
// Add a block display. $page->findField('block[create]')->click();
$this->assertEquals($label_value, $page->findField('block[title]')->getValue());
// Test if the title and path have been populated. $this->assertEquals($label_value, $page->findField('page[title]')->getValue());
$this->assertEquals(str_replace(' ', '-', $label_value), $page->findField('page[path]')->getValue());
// Create a menu item. $page->findField('page[link]')->click();
$this->assertEquals($label_value, $page->findField('page[link_properties][title]')->getValue());
// Wait for conditional field to show. $this->assertSession()->waitForElementVisible('named', ['select', 'page[link_properties][parent]']);
// Assert a menu can be selected as a parent. $this->assertSession()->optionExists('page[link_properties][parent]', 'admin:');
// Assert a parent menu item can be selected from within a menu. $this->assertSession()->optionExists('page[link_properties][parent]', 'admin:entity.view.collection');
// Add a block display. $page->findField('block[create]')->click();
$this->assertEquals($label_value, $page->findField('block[title]')->getValue());
protected function assertElementVisibleAfterWait($selector, $locator, $timeout = 10000) {
$this->assertSession()->assertWaitOnAjaxRequest();
$this->assertNotEmpty($this->assertSession()->waitForElementVisible($selector, $locator, $timeout));
}
/** * Data provider that returns theme name as the sole argument. */
public function themeDataProvider() {
$themes = $this->getTestThemes();
$data = [];
foreach ($themes as $theme) {
$data[$theme] = [
$theme,
];
$this->createNewTextFormat($page, $assert_session);
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $page->find('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertFalse($media_tab->isVisible(), 'Media filter settings should not be present because media filter is not enabled');
$this->assertTrue($page->hasUncheckedField('filters[media_embed][status]'));
$page->checkField('filters[media_embed][status]');
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $assert_session->waitForElementVisible('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertTrue($media_tab->isVisible(), 'Media settings should appear when media filter enabled');
$page->uncheckField('filters[media_embed][status]');
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $page->find('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertFalse($media_tab->isVisible(), 'Media settings should be removed when media filter disabled');
}
/** * Ensure CKEditor 5 admin UI's real-time validation errors do not accumulate. */
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $page->find('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertFalse($media_tab->isVisible(), 'Media filter settings should not be present because media filter is not enabled');
$this->assertTrue($page->hasUncheckedField('filters[media_embed][status]'));
$page->checkField('filters[media_embed][status]');
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $assert_session->waitForElementVisible('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertTrue($media_tab->isVisible(), 'Media settings should appear when media filter enabled');
$page->uncheckField('filters[media_embed][status]');
$assert_session->assertWaitOnAjaxRequest();
$media_tab = $page->find('css', '[href^="#edit-filters-media-embed-settings"]');
$this->assertFalse($media_tab->isVisible(), 'Media settings should be removed when media filter disabled');
}
/** * Ensure CKEditor 5 admin UI's real-time validation errors do not accumulate. */
public function waitForId($id, $timeout = 10000) {
return $this->waitForElement('named', ['id', $id], $timeout);
}
/** * Waits for the jQuery autocomplete delay duration. * * @see https://api.jqueryui.com/autocomplete/#option-delay */
public function waitOnAutocomplete() {
// Wait for the autocomplete to be visible. return $this->waitForElementVisible('css', '.ui-autocomplete li');
}
/** * Tests that a node, or its specific corner, is visible in the viewport. * * Note: Always set the viewport size. This can be done in your test with * \Behat\Mink\Session->resizeWindow(). Drupal CI JavaScript tests by default * use a viewport of 1024x768px. * * @param string $selector_type * The element selector type (css, xpath). * @param string|array $selector * The element selector. Note: the first found element is used. * @param bool|string $corner * (Optional) The corner to test: * topLeft, topRight, bottomRight, bottomLeft. * Or FALSE to check the complete element (default). * @param string $message * (optional) A message for the exception. * * @throws \Behat\Mink\Exception\ElementHtmlException * When the element doesn't exist. * @throws \Behat\Mink\Exception\ElementNotFoundException * When the element is not visible in the viewport. */
return $this->waitForElement('named', ['id', $id], $timeout);
}
/** * Waits for the jQuery autocomplete delay duration. * * @see https://api.jqueryui.com/autocomplete/#option-delay */
public function waitOnAutocomplete() {
// Wait for the autocomplete to be visible. return $this->waitForElementVisible('css', '.ui-autocomplete li');
}
/** * Tests that a node, or its specific corner, is visible in the viewport. * * Note: Always set the viewport size. This can be done in your test with * \Behat\Mink\Session->resizeWindow(). Drupal CI JavaScript tests by default * use a viewport of 1024x768px. * * @param string $selector_type * The element selector type (css, xpath). * @param string|array $selector * The element selector. Note: the first found element is used. * @param bool|string $corner * (Optional) The corner to test: * topLeft, topRight, bottomRight, bottomLeft. * Or FALSE to check the complete element (default). * @param string $message * (optional) A message for the exception. * * @throws \Behat\Mink\Exception\ElementHtmlException * When the element doesn't exist. * @throws \Behat\Mink\Exception\ElementNotFoundException * When the element is not visible in the viewport. */
$style_label = $this->randomString();
$style_path = $admin_path . '/manage/' . $style_name;
$effect_edit = [
'data[test_parameter]' => 100,
];
// Add style form. $page = $this->getSession()->getPage();
$assert = $this->assertSession();
$this->drupalGet($admin_path . '/add');
$page->findField('label')->setValue($style_label);
$assert->waitForElementVisible('named', ['button', 'Edit'])->press();
$assert->waitForElementVisible('named', ['id_or_name', 'name'])->setValue($style_name);
$page->pressButton('Create new style');
$assert->statusMessageContains("Style $style_label was created.", 'status');
// Add two Ajax-enabled test effects. $this->drupalGet($style_path);
$this->submitForm(['new' => 'image_module_test_ajax'], 'Add');
$this->submitForm($effect_edit, 'Add effect');
$this->drupalGet($style_path);
$this->submitForm(['new' => 'image_module_test_ajax'], 'Add');
$this->submitForm($effect_edit, 'Add effect');
$style_path = $admin_path . '/manage/' . $style_name;
$effect_edit = [
'data[test_parameter]' => 100,
];
// Add style form. $page = $this->getSession()->getPage();
$assert = $this->assertSession();
$this->drupalGet($admin_path . '/add');
$page->findField('label')->setValue($style_label);
$assert->waitForElementVisible('named', ['button', 'Edit'])->press();
$assert->waitForElementVisible('named', ['id_or_name', 'name'])->setValue($style_name);
$page->pressButton('Create new style');
$assert->statusMessageContains("Style $style_label was created.", 'status');
// Add two Ajax-enabled test effects. $this->drupalGet($style_path);
$this->submitForm(['new' => 'image_module_test_ajax'], 'Add');
$this->submitForm($effect_edit, 'Add effect');
$this->drupalGet($style_path);
$this->submitForm(['new' => 'image_module_test_ajax'], 'Add');
$this->submitForm($effect_edit, 'Add effect');
// Ensure the body has enough height to enable scrolling. Scroll 110px from
// top of body field to ensure CKEditor 5 toolbar is sticky.
$this->getSession()->evaluateScript('document.body.style.height = "10000px";');
$this->getSession()->evaluateScript('location.hash = "#edit-body-0-value";');
$this->getSession()->evaluateScript('scroll(0, document.documentElement.scrollTop + 110);');
// Focus CKEditor 5 text editor. $javascript = <<<JS Drupal.CKEditor5Instances.get(document.getElementById("edit-body-0-value").dataset["ckeditor5Id"]).editing.view.focus(); JS;
$this->getSession()->evaluateScript($javascript);
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-sticky-panel__placeholder'));
$toolbar_height = (int) $this->getSession()->evaluateScript('document.getElementById("toolbar-bar").offsetHeight');
$ckeditor5_toolbar_position = (int) $this->getSession()->evaluateScript("document.querySelector('.ck-toolbar').getBoundingClientRect().top");
$this->assertEqualsWithDelta($toolbar_height, $ckeditor5_toolbar_position, 2);
}
}
$this->getSession()->evaluateScript('location.hash = "#edit-body-0-value";');
$this->getSession()->evaluateScript('scroll(0, document.documentElement.scrollTop + 110);');
// Focus CKEditor 5 text editor. $javascript = <<<JS Drupal.CKEditor5Instances.get(document.getElementById("edit-body-0-value").dataset["ckeditor5Id"]).editing.view.focus(); JS;
$this->getSession()->evaluateScript($javascript);
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-sticky-panel__placeholder'));
$toolbar_height = (int) $this->getSession()->evaluateScript('document.getElementById("toolbar-bar").offsetHeight');
$ckeditor5_toolbar_position = (int) $this->getSession()->evaluateScript("document.querySelector('.ck-toolbar').getBoundingClientRect().top");
$this->assertEqualsWithDelta($toolbar_height, $ckeditor5_toolbar_position, 2);
}
}
public function testConversion() {
// Wrap the `<drupal-media>` markup in a `<p>`. $original_value = $this->host->body->value;
$this->host->body->value = '<p>foo' . $original_value . '</p>';
$this->host->save();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$assert_session = $this->assertSession();
$assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]', 1000);
$editor_html = $this->getEditorDataAsHtmlString();
// Observe that `<drupal-media>` was moved into its own block element. $this->assertEquals('<p>foo</p>' . $original_value, str_replace(' ', '', $editor_html));
}
/** * Tests that only <drupal-media> tags are processed. * * @see \Drupal\Tests\media\Kernel\MediaEmbedFilterTest::testOnlyDrupalMediaTagProcessed() */
public function testOnlyDrupalMediaTagProcessed() {
$this->drupalGet('node/add/basic_page');
$wrapper = $assert_session->elementExists('css', '#media_image_field-media-library-wrapper');
$wrapper->pressButton('Add media');
$this->assertNotNull($assert_session->waitForText('Add or select media'));
$page->attachFileToField('Add file', $this->container->get('file_system')->realpath($jpg_image->uri));
$this->assertNotNull($assert_session->waitForText('Alternative text'));
$page->fillField('Alternative text', $this->randomString());
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and insert');
$first_item_locator = "(//div[@data-drupal-selector='edit-media-image-field-selection-0'])[1]";
$this->assertNotNull($first_item = $assert_session->waitForElementVisible('xpath', $first_item_locator));
$first_item->pressButton('Remove');
$assert_session->waitForElementRemoved('xpath', $first_item_locator);
$page->waitFor(10, function D) use ($wrapper) {
return $wrapper->hasButton('Add media');
});
// Test reinserting the same selection. $wrapper->pressButton('Add media');
$this->assertNotNull($assert_session->waitForText('Add or select media'));
$assert_session->elementExists('xpath', "(//div[contains(@class, 'media-library-item')])[1]")->click();
$assert_session->checkboxChecked('media_library_select_form[0]');
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
trait OffCanvasTestTrait {
/** * Waits for the off-canvas area to appear, resized and visible. */
protected function waitForOffCanvasArea(): void {
// The data-resize-done attribute is added by the off_canvas_test module's // wrapper around Drupal.offCanvas.resetSize. $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '[data-resize-done="true"]'));
// Remove the data-resize-done attribute so in scenarios where off-canvas // opens yet another off-canvas, waitForOffCanvasArea() is looking for the // attribute on a new dialog, not an existing one. $this->getSession()->executeScript('document.querySelector("[data-resize-done]").removeAttribute("data-resize-done")');
}
}
->enableLayoutBuilder()
->setOverridable()
->save();
$assert = function D$permissions, $expected) {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->drupalLogin($this->drupalCreateUser($permissions));
$this->drupalGet(static::FIELD_UI_PREFIX . '/display/default/layout');
$page->clickLink('Add block');
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas .block-categories'));
if ($expected) {
$assert_session->linkExists('Create content block');
}
else {
$assert_session->linkNotExists('Create content block');
}
};
$permissions = [
'configure any layout',
'administer node display',
];
->setOverridable()
->save();
$assert = function D$permissions, $expected) {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->drupalLogin($this->drupalCreateUser($permissions));
$this->drupalGet(static::FIELD_UI_PREFIX . '/display/default/layout');
$page->clickLink('Add block');
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas .block-categories'));
if ($expected) {
$assert_session->linkExists('Create content block');
}
else {
$assert_session->linkNotExists('Create content block');
}
};
$permissions = [
'configure any layout',
'administer node display',
];
$this->assertNoRealtimeValidationErrors();
$assert_session->pageTextContains('No styles configured');
// Still no validation error when configuring other functionality first. $this->triggerKeyUp('.ckeditor5-toolbar-item-undo', 'ArrowDown');
$assert_session->assertWaitOnAjaxRequest();
$this->assertNoRealtimeValidationErrors();
// The Style plugin settings form should now be present and should have no // styles configured. $page->clickLink('Style');
$this->assertNotNull($assert_session->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'));
$javascript = <<<JS const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'); allowedTags.value = 'p.foo.bar | Foobar paragraph'; allowedTags.dispatchEvent(new Event('input')); JS;
$this->getSession()->executeScript($javascript);
// Immediately save the configuration. Intentionally do nothing that would // trigger an AJAX rebuild. $page->pressButton('Save configuration');
$assert_session->pageTextContains('No styles configured');
// Still no validation error when configuring other functionality first. $this->triggerKeyUp('.ckeditor5-toolbar-item-undo', 'ArrowDown');
$assert_session->assertWaitOnAjaxRequest();
$this->assertNoRealtimeValidationErrors();
// The Style plugin settings form should now be present and should have no // styles configured. $page->clickLink('Style');
$this->assertNotNull($assert_session->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'));
$javascript = <<<JS const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'); allowedTags.value = 'p.foo.bar | Foobar paragraph'; allowedTags.dispatchEvent(new Event('input')); JS;
$this->getSession()->executeScript($javascript);
// Immediately save the configuration. Intentionally do nothing that would // trigger an AJAX rebuild. $page->pressButton('Save configuration');
$admin_user = $this->drupalCreateUser([
'access toolbar',
'administer site configuration',
'access content overview',
]);
$this->drupalLogin($admin_user);
// Set size for horizontal toolbar. $this->getSession()->resizeWindow(1200, 600);
$this->drupalGet('<front>');
$this->assertNotEmpty($this->assertSession()->waitForElement('css', 'body.toolbar-horizontal'));
$this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.toolbar-tray'));
$page = $this->getSession()->getPage();
// Test that it is possible to toggle the toolbar tray. $content = $page->findLink('Content');
$this->assertTrue($content->isVisible(), 'Toolbar tray is open by default.');
$page->clickLink('Manage');
$this->assertFalse($content->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.');
$page->clickLink('Manage');
$this->assertTrue($content->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.');
'access toolbar',
'administer site configuration',
'access content overview',
]);
$this->drupalLogin($admin_user);
// Set size for horizontal toolbar. $this->getSession()->resizeWindow(1200, 600);
$this->drupalGet('<front>');
$this->assertNotEmpty($this->assertSession()->waitForElement('css', 'body.toolbar-horizontal'));
$this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.toolbar-tray'));
$page = $this->getSession()->getPage();
// Test that it is possible to toggle the toolbar tray. $content = $page->findLink('Content');
$this->assertTrue($content->isVisible(), 'Toolbar tray is open by default.');
$page->clickLink('Manage');
$this->assertFalse($content->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.');
$page->clickLink('Manage');
$this->assertTrue($content->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.');