How to get QWebEngine in QT Designer - qt

Question

I am trying to make a program for captioning youtube videos because they removed the community captions functionality last year. I want to be able to use the QWebEngine widget when in QT Designer but it isn't part of the main distribution and I cannot find the steps to install it on Windows.

Answer 1

C++
The problem is similar to this post but instead of QChartView you want QWebEngineView so my answer will be more concise and I will only point out the changes:
Promoted
First add QT += webenginewidgets in the .pro
Place the QWidget to the design.
Right click on the QWidget and select Promote to...
When doing the above, a menu appears, in the menu it should be set in QWebEngineView in Promoted Class Name, and QWebEngineView in Header file, then press the add button and finally press promote.
Plugin
You must clone the repository using the branch of your Qt version, in the example I will use Qt 5.15.2, then you must compile the plugin and install it:
git clone -b 5.15.2 https://code.qt.io/qt/qtwebengine.git
cd qtwebengine/src/plugins/qwebengineview
qmake .
make
make install
If you don't want to clone the project then you could download the files from here and run qmake, make and make install.
Python
It seems that the OP is using python and not C++ so the first solution has another methodology, but the second method still works as it installs the plugin for QtDesigner. Considering the above I am going to show simple methods to integrate QWebEngineView in QtDesigner.
Promoted
You just have to use steps 2 to 4 but setting the header "PyQt5.QWebEngineWidgets", and for example you will get the following:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QWebEngineView" name="widget"/>
</item>
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>28</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar"/>
</widget>
<customwidgets>
<customwidget>
<class>QWebEngineView</class>
<extends>QWidget</extends>
<header>PyQt5.QWebEngineWidgets</header>
<container>1</container>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>
If you are going to use PySide2 then just change it to PySide2.QtWebEngineWidgets.
Container
Another simpler option is to use QWidget as a container and then use a layout to place it.
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QWidget" name="widget" native="true"/>
</item>
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>28</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar"/>
</widget>
<resources/>
<connections/>
</ui>
import os
from pathlib import Path
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.uic import loadUi
CURRENT_DIRECTORY = Path(__file__).resolve().parent
class Widget(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
filename = os.fspath(CURRENT_DIRECTORY / "gui.ui")
loadUi(filename, self)
lay = QVBoxLayout(self.widget)
self.webview = QWebEngineView()
lay.addWidget(self.webview)
def main():
import sys
app = QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()
Note: Promoting a widget does not allow modifying the widget's properties in QtDesigner, only that it can be used when the .ui is loaded into the project.