How I can use playwright to do the same job as in Selenium for uploading a file in iframe?

[zydjohnHotmail]

Your question

Hello: I had some selenium code (C#), I want to migrate to playwright. But I can’t find any helpful example on how to upload a file to one web site, the upload file button is inside an iframe, actually, there is only one iframe in the web page. The following selenium C# code works:

driver.SwitchTo().Frame(0); var upload_file1 = driver.findElement(By.XPath("//input[@type='file']"))); upload_file1.SendKeys("C:\Uploads\1.mp4");

How I can rewrite the above C# code in Playwright? By the way, in Selenium, if you used driver.SwitchTo() to run any operations on that iframe, you have to go back to parent DOM element, if other elements are not in the iframe. But I don’t know in Playwright, do I have to switch to the iframe, and after upload file, do I have to switch back? Please advise, Thanks,

[mxschmitt]

We recommend FrameLocators, which makes it very simple to interact with iframes: https://playwright.dev/dotnet/docs/api/class-framelocator

You can then call SetInputFileAsync on the Locator instance, see here for reference: https://playwright.dev/dotnet/docs/input#upload-files

In Playwright there is no need to switch to anything. since a Locator represents an instance of a frame, to go to nested frames you use frame locators etc.

[zydjohnHotmail]

Hello: Finally, I have some time to do more testing on this issue. The following is my C# code trying to do the same as selenium code:

var upload_link =
    page.FrameLocator("iframe").Nth(0).Locator("//input[@type='file'");
When I run this, I got run time error:
=========================== logs ===========================
  waiting for frame "iframe >> nth=0"
  selector resolved to visible <iframe src="https://www.tiktok.com/creator#/upload?lang…></iframe>
waiting for selector "iframe >> nth=0 >> control=enter-frame >> //input[@type='file'"
  Failed to execute 'evaluate' on 'Document': The string './/input[@type='file'' is not a valid XPath expression.
============================================================

I think it is some syntax issue. Please advise on how to write a correct one. Thanks,

[mxschmitt]

your xpath is broken, it should be: page.FrameLocator("iframe").Nth(0).Locator("//input[@type='file']");

but usually we don't recommend xpath, since CSS selectors are easier:

page.FrameLocator("iframe").Nth(0).Locator("input[type='file']");

[zydjohnHotmail]

Hello: For unknown reason, I tried the both ways per your advice, but none of the below works: page.FrameLocator("iframe").Nth(0).Locator("//input[@type='file']"); page.FrameLocator("iframe").Nth(0).Locator("input[type='file']");

Actually, I want to upload a video to my TikTok account. The Selenium code works, but its performance is not good, so I want to migrate to Playwright. After I login to my TikTok account, I can click on upload icon, which opens a select file iframe, so I can click on “Select File” button and choose one file from my PC and upload to my TikTok account. By using Chrome developer tools, I can copy the iframe element, and here is the iframe element:

Inside the iframe element, there is one type file button, I also copy its element, and here it is:

In Chrome developer tools, if I run JavaScript: var iframes = document.getElementsByTagName('iframe'); I can see that iframes length is 1, so there is only one iframe in the page, but your advice did not work.

I also tried to use the following to locate iframe: var iframe0 = page.FrameLocator("src='https://www.tiktok.com/creator#/upload?lang=en'"); But I got error message: Inner Exception 1: PlaywrightException: Unknown engine "src" while parsing selector src='https://www.tiktok.com/creator#/upload?lang=en' So, I don’t know if Playwright support src as selector. Please advise or if you have a TikTok account, try to upload any video to your account by Playwright to see if iFrame works or not. Thanks,

[zydjohnHotmail]

OK. I see.

[zydjohnHotmail]

I didn't have time to try upload video to Tiktok, since it is very tough to login with Playwright or Puppeteer. Tiktok imposes very tough CAPTCHA, so I lost interest to upload files to Tiktok anymore.