Skip to content

How to use the repo to connect with a running Chrome browser and upload files? #593

@zydjohnHotmail

Description

@zydjohnHotmail

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()
.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()
.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:

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,

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions