Tutorials

Filling In Special-Format Inputs: Color, Date, Time, and More

Modern HTML forms use specialized input types - color pickers, date/time pickers, week and month selectors - that each expect their own value format. This tutorial builds Selectors for a page full of these special-format inputs and drives them all in one chain with LeftClick and FillInFrom.

Complete Program

Here's the whole workflow, start to finish. Each piece is broken down and explained below.

using GenerallyPositive;

using GenerallyPositive.Browser;

using static GenerallyPositive.Enums;

GPAL

.WithPublishToConsole()

.WithTypingDelay(100);

Selector colorInput = (Selector)GPAL.Selector

.WithCSS("#color-input")

.WithXPath("//*[@id='color-input']")

.WithValue("#000000")

.MatchValue("#000000");

Selector dateTimeInput = (Selector)GPAL.Selector

.WithCSS("#datetime-local-input")

.WithXPath("//*[@id='datetime-local-input']");

Selector dateInput = (Selector)GPAL.Selector

.WithCSS("#date-input")

.WithXPath("//*[@id='date-input']");

Selector monthInput = (Selector)GPAL.Selector

.WithCSS("#month-input")

.WithXPath("//*[@id='month-input']");

Selector weekInput = (Selector)GPAL.Selector

.WithCSS("#week-input")

.WithXPath("//*[@id='week-input']");

Selector timeInput = (Selector)GPAL.Selector

.WithCSS("#time-input")

.WithXPath("//*[@id='time-input']");

IBrowser browser = GPAL.Browser

.WithBrowserType(BrowserType.Chrome)

.WithUseAutomationEngine(AutomationEngine.PuppeteerPort)

.WithDriverLocation(@"c:drivers")

.GoTo("https://example.com/input-elements/special-formats/")

.LeftClick(colorInput)

.FillInFrom("#382d71")

.WaitFor(1_000)

.LeftClick(dateTimeInput)

.FillInFrom("2026-06-18T18:32")

.WaitFor(1_000)

.LeftClick(dateInput)

.FillInFrom("2026-06-18")

.WaitFor(1_000)

.LeftClick(monthInput)

.FillInFrom("2026-12")

.WaitFor(1_000)

.LeftClick(weekInput)

.FillInFrom("2026-W31")

.WaitFor(1_000)

.LeftClick(timeInput)

.FillInFrom("06:31")

.WaitFor(1_000)

.ToGPALObject();

browser.Close(true);

One Selector per Input, with Fallbacks

Each input gets its own Selector. WithCSS gives GPAL a fast primary lookup, and WithXPath provides a fallback if the CSS selector ever stops matching. For the color input, WithValue and MatchValue record what the field should currently contain - useful for verifying state before you change it.

Selector colorInput = (Selector)GPAL.Selector

.WithCSS("#color-input")

.WithXPath("//*[@id='color-input']")

.WithValue("#000000")

.MatchValue("#000000");

Selector dateInput = (Selector)GPAL.Selector

.WithCSS("#date-input")

.WithXPath("//*[@id='date-input']");

TIP

A Selector can carry several WithXPath or WithCSS candidates at once. GPAL tries them as alternatives for finding the same element, which makes the workflow resilient to small markup changes.

Click, Then Fill, in the Format the Control Expects

Each special-format input wants its value as a specific string: color inputs take a hex code, date inputs take YYYY-MM-DD, datetime-local takes YYYY-MM-DDTHH:MM, month takes YYYY-MM, week takes YYYY-Wnn, and time takes HH:MM. LeftClick focuses the control and FillInFrom types the value - GPAL handles the rest.

browser

.LeftClick(colorInput)

.FillInFrom("#382d71")

.WaitFor(1_000)

.LeftClick(dateTimeInput)

.FillInFrom("2026-06-18T18:32")

.WaitFor(1_000)

.LeftClick(dateInput)

.FillInFrom("2026-06-18");

TIP

Some special-format pickers run their own JavaScript on focus (opening a calendar widget, reformatting as you type). A short WaitFor after each FillInFrom gives that script time to settle before the next click.

Month, Week, and Time Inputs Follow the Same Pattern

Once you know the format each control expects, the rest is repetition: LeftClick to focus, FillInFrom with the right string, WaitFor to let the page catch up. The same four-line pattern handles month pickers, week pickers, and time pickers without any special-case code.

browser

.LeftClick(monthInput)

.FillInFrom("2026-12")

.WaitFor(1_000)

.LeftClick(weekInput)

.FillInFrom("2026-W31")

.WaitFor(1_000)

.LeftClick(timeInput)

.FillInFrom("06:31")

.WaitFor(1_000);

Wrap Up

Once every field is filled, ToGPALObject() materializes the live IBrowser and Close(true) tears down the driver process when the workflow is finished.

IBrowser browser = GPAL.Browser

.WithBrowserType(BrowserType.Chrome)

.WithUseAutomationEngine(AutomationEngine.PuppeteerPort)

.WithDriverLocation(@"c:drivers")

.GoTo("https://example.com/input-elements/special-formats/")

// ... fill in all inputs ...

.ToGPALObject();

browser.Close(true);

WARNING

Passing true kills the running web driver process. Use true when the workflow is completely done; use false if another workflow in the same run still needs that driver.

Documentation Example

Documentation

Showing off some plain text in these paragraphs eligendi laboriosam illo nostrum corporis at libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta!

Other formats

Here you can find different accents and emphasis sit amet consectetur adipisicing elit. Obcaecati, iste distinctio veritatis eligendi laboriosam illo nostrum corporis at libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta!

This is a link and how it could look like bestlinkinthebeautifulworld. Obcaecati, iste distinctio veritatis eligendi laboriosam illo nostrum corporis at libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta!

Here's just some classic bold text adipisicing elit. Obcaecati, iste distinctio veritatis eligendi laboriosam notBoldSecondbestlinkinthebeautifulworld illo nostrum corporis at libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta!

Obcaecati, iste distinctio veritatis eligendi laboriosam adipisicing elit illo nostrum corporis at adipisicing elit libero vel voluptas? Expedita, adipisicing facere dolores voluptatem ad ab rem assumenda soluta!

Other cuple of colors in case we want to emphasize several ways adipisicing elit. Obcaecati, iste distinctio veritatis eligendi laboriosam adipisicing elit illo nostrum corporis at voluptatem libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta!

Adding Images to the content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, iste distinctio veritatis eligendi laboriosam illo nostrum corporis at libero vel voluptas? Expedita, facere dolores voluptatem ad ab rem assumenda soluta! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod veniam, quam ad expedita laborum sed at voluptates culpa ipsam ut vel. Ullam temporibus a mollitia quod aliquam ratione exercitationem nesciunt.

Coding Blocks

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quas consequuntur illo numquam assumenda autem exercitationem distinctio perspiciatis in natus. Eius dicta similique ipsam ipsa minima, nemo quae enim tempore.

GPAL

.CallIfNotFound(GenericCallIfNotFound)

.WithPublishToConsole();

//System.Drawing.Rectangle windowSize = new System.Drawing.Rectangle(10, 10, 1500, 1024);

// NOTE: we have to set browser = before we execute any steps

// this is due to the 'GenericCallIfNotFound' which might throw an exception, and BankScraper will not have the browser set when it calls scraper.Close()

// until the complete fluent line gets executed (meaning every step, meaning browser is not set until everything else succeeds)

browser = GPAL.Browser

.WithBrowserType(Enums.BrowserType.Chrome)

.WithProfileDataDirectory(ChromeProfileLocation)

.WithUseAutomationEngine(AutomationEngine.Selenium)

.WithWindowSize(new System.Drawing.Rectangle(0,0,1920,1080))

.ToGPALObject();

Tutorials

Filling In Special-Format Inputs: Color, Date, Time, and More

Complete Program

One Selector per Input, with Fallbacks

Click, Then Fill, in the Format the Control Expects

Month, Week, and Time Inputs Follow the Same Pattern

Wrap Up

Documentation Example

Documentation

Category

Endpoint

Enpoint

Enpoint

Enpoint

Other formats

Adding Images to the content

Coding Blocks

On this page