After an update in windows or Google translate website: how to find the ID of an element?

Question

1.00/5 (1 vote)

See more:

I have a translation program that opens a Google Translate website in a webbrowser control in it, when Ctrl+C is pressed 3 times fast in Windows my program puts what is in clipboard in Google Translate web page in the webbrowser control automatically and it gets translated, suddenly my program stopped working correctly, how to get the source textbox as an HTMLElement to get/set what is in it and apply things like a 'click' and 'focus' on it.

I think there is no more an element with the ID: "source" (which was the textbox of the text to be translated).

The typing of text in the textbox source is so slow too dunno why (it gets one letter every 0.7 seconds or something)

What I have tried:

HtmlElement textArea = formMain.webBrowserGoogleTranslate.Document.GetElementById("source");

Posted 5-Nov-20 7:14am

john1990_1

Updated 5-Nov-20 11:28am

v2

Add a Solution

Comments

F-ES Sitecore 5-Nov-20 13:27pm

Use the translation API instead

https://cloud.google.com/translate/

john1990_1 5-Nov-20 13:36pm

Thx but I want a robust Google Translate website with all its features and visual elements, I implemented the API long ago and it wasn't good enough.

F-ES Sitecore 5-Nov-20 14:20pm

Then build your own rather than stealing other people's effort :)

john1990_1 5-Nov-20 14:23pm

I'm just putting a website in a webbrowser in my program, I just want to make it easier for the user by putting what is in his clipboard into the textbox.

Richard MacCutchan 6-Nov-20 6:19am

Ctrl-V.

john1990_1 6-Nov-20 6:33am

I found how to access the Element, it's just that I'm a hobbyist and couldn't study formally and learned it all by trial and error, the program is for me and a couple of my friends, so do you think I should create a whole Google Translate website? I don't think this usage of the source text area is prohibited!

Richard MacCutchan 6-Nov-20 6:46am

No, it's not prohibited, but it is an unofficial way to do it. So don't be surprised if Google makes it hard for you. And since the translate website is simple to use why not just stick to the easy way?

john1990_1 6-Nov-20 6:49am

When Ctrl+C is pressed 3 times fast anywhere in Windows it opens the winform with the webbrowser control in it and pastes what is in clipboard in the textarea for even faster and easier translating from anywhere in Windows, then pressing "Esc" minimizes the winform.

Richard Deeming 6-Nov-20 8:23am

Bear in mind that the WebBrowser control is stuck in IE7 mode, unless you mess around with the registry on every computer where your application runs.

I'd be surprised if the Google Translate site works in that control. Even if they haven't already done so, Google are likely to drop support for all versions of Internet Explorer soon.

You should consider upgrading to use a more modern browser engine instead. For example:
CefSharp - Fast web browser for WinForms and WPF Apps[^]
Microsoft Edge WebView2 Control - Microsoft Edge Development | Microsoft Docs[^]

john1990_1 6-Nov-20 8:33am

I had this problem before and I fixed it as I used a code that makes my program use the latest version of IE available, for now it works, when it stops working I'm going to work on that, I'm a hobbyist and couldn't study at a university and my knowledge in programming is very limited.

john1990_1 10-Nov-20 5:49am

If I use Edge as you suggested and I saw that it's easy: "Install a Nugget and add a browser to the winform", can I still access its document the same way as a normal webbrowser control as I do now accessing this HTMLElement?

Richard Deeming 10-Nov-20 6:22am

There doesn't seem to be an API to access the DOM:
Programming the dom? · Issue #261 · MicrosoftEdge/WebView2Feedback · GitHub[^]

However, you can execute Javascript in the context of the page:
CoreWebView2.ExecuteScriptAsync(String) Method (Microsoft.Web.WebView2.Core) | Microsoft Docs[^]

john1990_1 10-Nov-20 6:28am

Can this Javascrpit execution do these in the website:
1- Submit a textbox.
2- Set text in a textbox.
3- Get text from a textbox.
4- Select a textbox (set input focus on it).
If yes, how?

Richard Deeming 10-Nov-20 6:36am

As I understand it, it should be very similar to running script on your own site:

// Read the textarea value:
string text = await webView2.ExecuteScriptAsync("document.querySelector('textarea').value");

// Set the textarea value:
await webView2.ExecuteScriptAsync("document.querySelector('textarea').value = " + JsonConvert.SerializeObject("The new value to set..."));

// Set focus to the textarea:
await webView2.ExecuteScriptAsync("document.querySelector('textarea').focus()");

// Submit the forum:
await webView2.ExecuteScriptAsync("document.querySelector('form').submit()");

john1990_1 10-Nov-20 7:37am

https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/winforms

I installed the Nugget and can't find WebView2 in my controls when I open design view of my WinForm.

Richard Deeming 10-Nov-20 7:45am

Did you install the latest prerelease version, as specified in the documentation?

john1990_1 10-Nov-20 8:20am

Yes.

I got this as a "Warning" in VS:
Severity Code Description Project File Line Suppression State
Warning The referenced component 'C:\Users\[name]\Dropbox\My C# Apps\translate\BombaTranslateSourceV38\packages\Microsoft.Web.WebView2.1.0.674-prerelease\build\..\..\lib\uap10.0\Microsoft.Web.WebView2.Core.winmd' could not be found. BombaTranslate

Richard Deeming 10-Nov-20 9:16am

It's probably worth raising an issue on the GitHub project:
Issues · MicrosoftEdge/WebView2Feedback · GitHub[^]

2 solutions

Solution 1

That's the problem with what you're doing.

Every time the website you're using changes, you have to go digging through the new HTML and find the stuff you need. The owners of the site are free to change everything, including css, IDs, events, javascript, ... without telling you and you have to do the leg work yourself. You cannot rely on code to do it for you.

Posted 5-Nov-20 11:29am

Dave Kreskowiak

Comments

john1990_1 6-Nov-20 5:07am

I tried looking for the ID of the element in Inspect in Chrome but I can't find it, and yes, every ~ 4-5 years I'm gonna change the ID of the element, this time I can't find the ID, can anyone help me please to tell me how to access the HTMLElement? as I said I'm just putting a website in a webbrowser in my program, I just want to make it easier for the user by putting what is in his clipboard into the textbox, my program is for me and my friends with no payments and no donations accepted. how to get to the HTMLElement from class name?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

john1990_1 · Accepted Answer · 2020-11-06T00:03:00

Solution 2

This solved it for me (Win10):

HtmlElement textArea = formMain.webBrowserGoogleTranslate.Document.GetElementsByTagName("TEXTAREA")[0];

While on my other Win10 PC the problem didn't exist to begin with, and this solution still worked on it.

Posted 6-Nov-20 0:03am

john1990_1

Updated 6-Nov-20 0:15am

Comments

Dave Kreskowiak 7-Nov-20 11:35am

And when they don't use a TEXTAREA on the next iteration of the UI, then what are you going to do?

This is the problem with web scraping. You have no idea what you're going to have to look for when the site changes.

john1990_1 7-Nov-20 12:01pm

I've been with this program for a long time and Google doesn't change the Translate page a lot, every time it does I make an update to my program. I'm a hobbyist and this program is for me and some friends.