How to use the repo to connect with a running Chrome browser and upload files?
Hello: I want to use the repo to connect with a running Chrome browser, then from the current page, find a file upload button and click the button and select one file from my local PC and upload it. I have the following C# to run Chrome browser first:
Process ChromeProcess = new() { StartInfo = new ProcessStartInfo { FileName = @"C:\Program Files\Google\Chrome\Application\chrome.exe", Arguments = $"https://www.bing.com/ --new-window --remote-debugging-port=9222 --user-data-dir=C:\ChromeData" } }; ChromeProcess.Start(); I have the following component definition:
using _ = TikTokPage;
[Url("https://www.tiktok.com/@userXXX?lang=en")]
public class TikTokPage : Page<_>
{
public H1<_> Header { get; private set; }
[FindByXPath("@href='https://www.tiktok.com/upload?lang=en'")]
public Link<_> Upload { get; private set; }
[FindByClass("tiktok-btn-pc", Visibility = Visibility.Any)]
public Button<_> Post { get; private set; }
}
I can verify web page after I login to TikTok by hand, like the following: AtataContext.Configure() .UseChrome() .WithOptions(x => x.DebuggerAddress = $"127.0.0.1:9222") .Build(); Go.To<TikTokPage>() .PageTitle.Should.Equal(TikTok_Title); However, I don’t know how to click on the “Upload” button. My code: AtataContext.Configure() .UseChrome() .WithOptions(x => x.DebuggerAddress = $"127.0.0.1:{ChromePort}") .Build(); Go.To<TikTokPage>() .PageTitle.Should.Equal(TikTok_Title) .Upload.Click(); The above code didn’t work for .Upload.Click();
From DevTools in Google Chrome, I can see the “Upload” button is the following element:
<svg class="tiktok-rpdue5-StyledUploadIcon e18d3d943" width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
I can see the href is fixed, the other, like svg class is dynamic. I want to know how I can click on the “Upload” button inside TikTok home page? [FindByXPath("@href='https://www.tiktok.com/upload?lang=en'")] is not correct. How to find a SVG element below the "A" link?
From testing by hand, I can see that after I click on “Upload” button, and in the open file dialog, I can select a local video file, then there is a hidden button is shown. The hidden button has the value “Post”, then I can click on “Post” button to finally upload a video file to TikTok, my home page. Please advise on how to write the code for this. Thanks,