How to submit a form html with Dart? - html

Question

I need to scrape some data for the Dart / Flutter application and I need to log in to access the page.
How do I submit changes to the form data and click on the login button? I tried as follows:
var loginPage = await http.get('https://mypage.com/login');
var document = parse(loginPage.body);
var username = document.querySelector('#username') as InputElement;
var password = document.querySelector('#password') as InputElement;
username.value = 'USERNAME';
password.value = 'PASSWORD';
var submit = document.querySelector('.btn-submit') as ButtonElement;
submit.click();
But I have the following error:
Error: 'InputElement' isn't a type.
Error: 'ButtonElement' isn't a type.
I also tried the following:
InputElement username = document.querySelector('#username');
But a get the error A value of type 'Element' can't be assigned to a variable of type 'InputElement'
I need to make this scrape in the flutter application to avoid passing the password using API.
How can I log in to the page to get the data?

Answer 1

InputElement and ButtonElement are part of the dart:html package, therefore, we shouldn't forget to import it in our code:
import 'dart:html';
import 'package:http/http.dart' as http;
void submitForm() async {
var loginPage = await http.get('https://mypage.com/login');
var document = parse(loginPage.body);
var username = document.querySelector('#username') as InputElement;
var password = document.querySelector('#password') as InputElement;
username.value = 'USERNAME';
password.value = 'PASSWORD';
var submit = document.querySelector('.btn-submit') as ButtonElement;
submit.click();
}
By doing so, the compiler will recognize InputElement and ButtonElement as correct types.
Another, more elegant, way to obtain the same result would be:
import 'dart:html';
import 'package:http/http.dart' as http;
void submitForm() async {
var loginPage = await http.get('https://mypage.com/login');
Document document = parse(loginPage.body);
(document.querySelector('#username') as InputElement).value = 'USERNAME';
(document.querySelector('#password') as InputElement).value = 'PASSWORD';
(document.querySelector('.btn-submit') as ButtonElement).click();
}
If we'd like to use the same functionality in a Flutter project, we might need the help of the universal_html package:
Add this to your package's pubspec.yaml file:
dependencies:
universal_html: ^1.2.3
Run flutter pub get
Import the package and use the code:
import 'package:http/http.dart' as http;
import 'package:universal_html/html.dart';
void submitForm() async {
var loginPage = await http.get('https://mypage.com/login');
Document document = parse(loginPage.body);
(document.querySelector('#username') as InputElement).value = 'USERNAME';
(document.querySelector('#password') as InputElement).value = 'PASSWORD';
(document.querySelector('.btn-submit') as ButtonElement).click();
}