Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add missing mouseover before click for select and radio elements. #14

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add missing mouseover before click for select and radio elements. #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c36aada
Add missing mouseover for select and radio elements before click.
vever001 Aug 10, 2024
faed618
Reproduce issue (caused by size attribute on form elements?).
vever001 Aug 20, 2024
bdb6b46
Looks like scrollIntoView block: 'center' fixes it??
vever001 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/Selenium2Driver.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,7 @@ public function mouseOver(string $xpath)
private function scrollElementIntoView(Element $element): void {
$script = <<<JS
var e = arguments[0];
e.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' });
e.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about this change. I'm wondering why it is necessary?

Copy link
Author

@vever001 vever001 Aug 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried the fix from #15 but it didn't solve the issue.
I'll spend some more time shortly to try to understand what's going on but I'm not sure the issue is specific to my project, I think it's an edge case (with size attributes?).
If we revert this line, the test fails.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vever001
#15 does not scroll for you. it only prevents the re-scrolling. If you apply #15, you would need to scroll to the element before making an assertion.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We faced similar issue after upgrading Drupal 10.2 to 10.3, where behat/mink-selenium2-driver got replaced with this library. The tests started to fail and patching the e.scrollIntoView() block argument to center fixed the issues of layouts with floating toolbar receiving the press/click events.

var rect = e.getBoundingClientRect();
return {'x': rect.left, 'y': rect.top};
JS;
Expand Down Expand Up @@ -1188,7 +1188,7 @@ private function selectRadioValue(Element $element, string $value): void
{
// short-circuit when we already have the right button of the group to avoid XPath queries
if ($element->attribute('value') === $value) {
$element->click();
$this->clickOnElement($element);

return;
}
Expand Down Expand Up @@ -1230,7 +1230,7 @@ private function selectRadioValue(Element $element, string $value): void
throw new DriverException($message, 0, $e);
}

$input->click();
$this->clickOnElement($input);
}

/**
Expand All @@ -1242,6 +1242,7 @@ private function selectOptionOnElement(Element $element, string $value, bool $mu
// The value of an option is the normalized version of its text when it has no value attribute
$optionQuery = sprintf('.//option[@value = %s or (not(@value) and normalize-space(.) = %s)]', $escapedValue, $escapedValue);
$option = $element->element('xpath', $optionQuery);
$this->doMouseOver($element);

if ($multiple || !$element->attribute('multiple')) {
if (!$option->selected()) {
Expand Down
47 changes: 44 additions & 3 deletions tests/Custom/LargePageClickTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,48 @@ class LargePageClickTest extends TestCase
{
public function testLargePageClick(): void
{
$this->getSession()->visit($this->pathTo('/multi_input_form.html'));
$this->getSession()->visit($this->pathTo('/advanced_form.html'));
// @todo Why is size attribute causing ElementClickIntercepted errors?
$this->getSession()->executeScript('document.querySelector("input[name=\'first_name\']").setAttribute("size", 200);');

// Add a large amount of br tags so that the button is not in view.
// Add a large amount of br tags so that form elements are not in view.
$this->makePageLong();

$page = $this->getSession()->getPage();

// Test select focus.
$this->scrollToTop();
$page->selectFieldOption('select_number', 'thirty');

// Test radio button focus.
$this->scrollToTop();
$page->selectFieldOption('sex', 'm');

// Test checkboxes focus.
$this->scrollToTop();
$page->uncheckField('mail_list');
$this->scrollToTop();
$page->checkField('agreement');

// Test button focus and submit.
$this->scrollToTop();
$page->pressButton('Register');
$this->assertStringContainsString('no file', $page->getContent());

$expected = <<<EOF
array(
agreement = `on`,
email = `your@email.com`,
first_name = `Firstname`,
last_name = `Lastname`,
notes = `original notes`,
select_number = `30`,
sex = `m`,
submit = `Register`,
)
no file
EOF;

$this->assertStringContainsString($expected, $page->getContent());
}

public function testDragDrop(): void
Expand Down Expand Up @@ -47,4 +81,11 @@ private function makePageLong(): void {
$this->getSession()->executeScript($script);
}

/**
* Scrolls to the top of the page.
*/
private function scrollToTop(): void {
$this->getSession()->executeScript('window.scrollTo(0, 0);');
}

}