QML WebEngineView and DOM elements update

Question

I am trying to open Netflix url with updated input credentials using a javascript. The input appears to be updated in the HTML form but when I trigger sign In button, the input fields gets empty. Any input is most appreciated

WebEngineView {
    id: webEngineView
    focus: true                
    url: "https://www.netflix.com/de-en/login"

    onLoadProgressChanged: {
        if(loadProgress === 100){
            webEngineView.runJavaScript("var input1 = document.getElementsByName('email');
                                                      input1[0].value =\"xxxxx@email.com\";",
                                        function(result) { console.error("Email updated"); });
            webEngineView.runJavaScript("var input2 = document.getElementsByName('password');
                                                      input2[0].value =\"*******\";",
                                        function(result) { console.error("Password updated"); });
        }
    }
}

I've updated the code. The compiler doesn't complain about it though. Problem still remain unresolved. — Keen Learner, Sep 26 '18 at 06:32

folibis · Answer 1 · 2018-09-26T14:44:09.893

You probably use wrong element name. Check the value returned by document.getElementsByName:

webEngineView.runJavaScript("document.getElementsByName('element-name')", function(element){
                console.log(element);
});

I advice you to use element id instead of name. (and document.getElementById() respectively). You can find the element id with Developer tools (F12 in Chrome).

The right element is id_userLoginId but it still doesn't work. I guess that the problem is Netflix page. Maybe some styles or whatever ... Interesting that the code works fine in Chrome console. Here is the code that works fine with Google:

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtWebEngine 1.7

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("WebEngine Test")

    WebEngineView {
        id: webEngineView
        focus: true
        anchors.fill: parent
        url: "https://www.google.com"
        onLoadingChanged: {
            if(loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus)
            {
                webEngineView.runJavaScript("searchbox = document.getElementById(\"lst-ib\"); searchbox.value=\"Who Framed Roger Rabbit\";");
            }
        }
    }
}

Another way to run custom script:

WebEngineView {
    id: webEngineView
    focus: true
    anchors.fill: parent
    url: "https://www.google.com"
    userScripts: WebEngineScript {
        injectionPoint: WebEngineScript.DocumentReady
        sourceCode: "box = document.getElementById('lst-ib'); box.value = 'xxx';"
    }
}

Unfortunately, that also doesn't work with Netflix.

Thanks for the alternative way. I noticed that same with google search page the input through script works fine unfortunately with Netflix and Skype web it doesn't. If you come across any solution for this kindly update here the same would be helpful — Keen Learner, Oct 04 '18 at 12:55

QML WebEngineView and DOM elements update

1 Answers1