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 =\"[email protected]\";",
                                        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

folibis folibis · Accepted Answer · 2018-09-26T14:19:46

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.

QML WebEngineView and DOM elements update

1 Answers