Testcafe: .click() isn't working on a lit-element project

[andym0457]

What is your Test Scenario?

I have tried to create a simple litElement project which has an application with a textfield and a button. I want to test that both these components are working correctly using testcafe. I can type into the text field fine but the .click() doesn't appear to be working for me.

What is the Current behavior?

From debugging I can see that the mouse clicks on the button the @click is never called on the button component

What is the Expected behavior?

.click() should call the buttons @click function

What is your web application and your TestCafe test code?

Steps to set up project are on the following link: https://vaadin.com/tutorials/lit-element/starting-a-lit-element-project

Your complete test code (or attach your test files):

Test File

 import { Selector, ClientFunction } from 'testcafe';

const elementWithId = Selector((id) => {
    let currentElement = document.querySelector('todo-view').shadowRoot.querySelector(id);
    console.log(currentElement);
    return currentElement;
});

const textfieldWithId = Selector((id) => {
    let currentElement = document.querySelector('todo-view').shadowRoot.querySelector(id).shadowRoot.querySelector('input');
    console.log(currentElement);
    return currentElement;
});

fixture `Getting Started`
    .page `http://localhost:8080/`;

    test('My first test', async t => {
        const textfield = textfieldWithId('vaadin-text-field');
        const button = elementWithId('vaadin-button');

        if( await textfield.visible) {
            await t.debug()    
                    .typeText(textfield, 'Peter');
        }

        if (await button.visible) {
            await t.click(button)
                    .wait(5000);
            const getLocation = ClientFunction(() => document.location.href);
            await t.expect(getLocation()).eql('https://www.google.com/');
        }
    });

todo-views.js

import { LitElement, html } from 'lit-element';
import '@vaadin/vaadin-text-field';
import '@vaadin/vaadin-button';


class TodoView extends LitElement {


    constructor() {
        super();
    }

    render() {
        return html ` 
            <p>todo-view</p>
            <vaadin-text-field placeholder="Insert Task Here" value=""> 
            </vaadin-text-field>

            <vaadin-button theme="primary" @click="${this.addTodo}"> 
                Go To Google
            </vaadin-button>
        `;
    }
    addTodo() {
        window.location.replace('https:/www.google.com');
    }

}

customElements.define('todo-view', TodoView); 

$ testcafe firefox ./testOne.js
Using locally installed version of TestCafe.
Running tests in:

• Firefox 68.0.0 / Windows 10.0.0

Getting Started
× My first test

1) AssertionError: expected 'http://localhost:8080/' to deeply equal 'https://www.google.com/'

  Browser: Firefox 68.0.0 / Windows 10.0.0

     26 |
     27 |        if (await button.visible) {
     28 |            await t.click(button)
     29 |                    .wait(5000);
     30 |            const getLocation = ClientFunction(() => document.location.href);
   > 31 |            await t.expect(getLocation()).eql('https://www.google.com/');
     32 |        }
     33 |    });
     34 |

1/1 failed (37s)

Your Environment details:

• testcafe version: 1.4.0
• node.js version: v11.6.0
• command-line arguments: testcafe chrome ./testOne.js
• browser name and version: Firefox 68.0.0, Chrome 76.0.3809
• platform and version: Windows 10

[Dmitry-Ostashev]

Thank you for the detailed description. I have reproduced this behavior on my side. We need additional time to research a cause of the issue. We will let you know as soon as we have any result.

[misaon]

Any update?

[AlexSkorkin]

No updates yet. We will let you know as soon as we have any result.

[svarog8109]

Any news about it?

[alexey-lin]

No news yet. We will update this thread as soon as we have any result. Your PR would be highly appreciated.