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

t.click incorrectly applies :focus-visible class in Firefox #7969

Closed
tomasVizdal opened this issue Aug 23, 2023 · 5 comments
Closed

t.click incorrectly applies :focus-visible class in Firefox #7969

tomasVizdal opened this issue Aug 23, 2023 · 5 comments
Labels
FREQUENCY: level 1 STATE: Stale An outdated issue that will be automatically closed by the Stale bot. TYPE: bug The described behavior is considered as wrong (bug).

Comments

@tomasVizdal
Copy link

What is your Scenario?

When t.click(divElement) executes in Firefox v106.0.3 browser on windows 10, :focus-visible pseudo class is applied on the div. This is not happening when the test is done manualy.

What is the Current behavior?

When t.click(divElement) in Firefox v106.0.3 browser on windows 10, :focus-visible pseudo class is applied on the div. This is not happening when the test is done manualy.

What is the Expected behavior?

Clicking on an element should not apply :focus-visible. Observe that other browsers like Chrome or Edge do not apply the :focus-visible pseudo class.

What is your public website URL? (or attach your complete example)

<html>
<head>
    <style>
        #divWithFocusVisible {
            border: 1px solid red;
        }

        #divWithFocusVisible:focus-visible {
            border: 10px solid #00D6FF;
        }
    </style>
    <title>:focu-visible in Firefox</title>
</head>
<body>
<div id="divWithFocusVisible" tabindex="0">
    Should not have focus ring.
</div>
</body>
</html>

What is your TestCafe test code?

fixture`focus-visible`
    .page('index.html');
test('Should not have applied :focus-visible after click', async () => {
    const divWithFocusVisible = Selector('#divWithFocusVisible');
    const redColor = 'rgb(255, 0, 0)';

    await t
        .expect(divWithFocusVisible.getStyleProperty('border-top-color')).eql(redColor)
        // click on the div element should not apply :focus-visible
        .click(divWithFocusVisible)
        .expect(divWithFocusVisible.getStyleProperty('border-top-color')).eql(redColor);
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

  1. Execute the enclosed testcafe test in Firefox

TestCafe version

3.2.0

Node.js version

18.17.1

Command-line arguments

testcafe firefox test-file.ts

Browser name(s) and version(s)

Firefox 106.0.3

Platform(s) and version(s)

Windows 10

Other

No response
@tomasVizdal tomasVizdal added the TYPE: bug The described behavior is considered as wrong (bug). label Aug 23, 2023
@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Aug 23, 2023
@tomasVizdal tomasVizdal changed the title t.click incorrectly applies :focus-visible class in firefox t.click incorrectly applies :focus-visible class in Firefox and Safari Aug 23, 2023
@tomasVizdal tomasVizdal changed the title t.click incorrectly applies :focus-visible class in Firefox and Safari t.click incorrectly applies :focus-visible class in Firefox Aug 23, 2023
@Aleksey28
Copy link
Collaborator

Thank you for reporting the issue.

I managed to reproduce it. The issue is not in Firefox. It's a specificity of our proxy driver. Since the TestCafe version 3.0.0, we run tests in Native Automation mode by default for Chromium-based browser. This mode reduces the use of our proxy driver. That's why your usage scenario works fine in Chrome. At present, we do not support this mode for Firefox. As a workaround, you can execute this type of test only with Chromium-based browsers (e.g. Chrome, MS Edge) and don't turn off the Native Automation mode.

Since the usage scenario is very rare and the issue has a workaround, I'll close it. Please let us know if the suggested workaround doesn't meet your needs.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Aug 28, 2023
@tomasVizdal
Copy link
Author

Hello @Aleksey28,
Unfortunately, we have to run this test on Firefox and Safari. Coudly ouplease consider to reopen the issue?

@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Sep 6, 2023
@AlexKamaev
Copy link
Contributor

We can reopen the issue. However, we cannot give you any time estimates for our research or the fix.

@AlexKamaev AlexKamaev reopened this Sep 7, 2023
@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Sep 7, 2023
@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

@github-actions github-actions bot added the STATE: Stale An outdated issue that will be automatically closed by the Stale bot. label Mar 16, 2024
@github-actions GitHub Actions
Copy link

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
FREQUENCY: level 1 STATE: Stale An outdated issue that will be automatically closed by the Stale bot. TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@AlexKamaev @Aleksey28 @tomasVizdal