Request to add codechef submit

[Talha76]

There is no direct way to submit in codechef like codeforces and atcoder. Could you please add this feature to directly submit in codechef using cpb submit command?

[searleser97]

Right now I am a bit overwhelmed by work to do it at the moment. But I encourage you to try to add it yourself following this guide (which is basically just following the changes of a PR) https://searleser97.github.io/cpbooster/docs/add-online-judge-support and also you can check how others have contributed and added more online judges support like https://github.com/searleser97/cpbooster/pull/43

[Talha76]

Thanks for guidance. I will try to add.

[searleser97]

@Talha76 is there any issue you are facing that I can help with?

[Talha76]

@searleser97 I am really sorry that I was busy doing competitive programming. I read the issue and the changed files, and I think I understood what to do. If I face some issue while updating I will inform you. Please pardon me for this.

[searleser97]

You can also check this PR that contains comments about the changes https://github.com/searleser97/cpbooster/pull/22/files

[Talha76]

Is the data-value here the cpp alias?

[searleser97]

oh, that is not looking good, if you couldn't find a "select" HTML element then we might to modify the "UploadFile" function to support this online judge, which might not be that dificult but we need to analize how the site knows which language is submitted

[Talha76]

@searleser97, I've found <select> tag. But all of the other codes in the inspector are colorful, while the whole <select> tag is of gray color, which seems to me as a commented code. Is it really commented or still active in the code?

If it's still active though, then we have to go through some steps to go to the submit page. Like:

1. At first there is a button in the main problem page called Switch to old problems page
2. After going to old problems page, we need to click the Submit button, which takes us to the submit page.
3. There, we need to upload the file and submit, and this page has that above mentioned <select> tag, but colored in gray in inspector.

So, how to manage all of these?

[Talha76]

@searleser97 Also please give some guidance about installing dependencies in the cloned folder, running and testing. I tried to run and test, but it gives some error, which I cannot understand.

[searleser97]

@searleser97 Also please give some guidance about installing dependencies in the cloned folder, running and testing. I tried to run and test, but it gives some error, which I cannot understand.

for installation just run npm install and you should be good, here is a link with the documentation to contribute https://searleser97.github.io/cpbooster/docs/setup-dev-env

[searleser97]

@searleser97, I've found <select> tag. But all of the other codes in the inspector are colorful, while the whole <select> tag is of gray color, which seems to me as a commented code. Is it really commented or still active in the code?

If it's still active though, then we have to go through some steps to go to the submit page. Like:

1. At first there is a button in the main problem page called Switch to old problems page
2. After going to old problems page, we need to click the Submit button, which takes us to the submit page.
3. There, we need to upload the file and submit, and this page has that above mentioned <select> tag, but colored in gray in inspector.

So, how to manage all of these?

if there is a tag then there is nothing to modify on the upload file function, we should be good to go.

[searleser97]

sorry for the late replies btw, I didn't see this before in my email :(

[Talha76]

I tested successfully and all tests passed successfully, but how do I test that the submission actually works?

[Talha76]

And here's another issue. In the submit button inspection, I found the code like this.

<div class="submit-run float-right">
    <button class="ns-button" data-ember-action="519">Submit</button>
</div>

I didn't find any type=submit in this. What should I do here?

[searleser97]

we might need to click that button then by putting the correct class selector, take a look at playwright documentation here: https://playwright.dev/docs/selectors

About how do you test that it works, you have to install cpbooster locally, the instructions are in the link I sent you before, I believe the command is something like npm run install:dev, then you can try to submit your code from cpbooster and see if it works

[Talha76]

And here's another issue. In the submit button inspection, I found the code like this.

<div class="submit-run float-right">
    <button class="ns-button" data-ember-action="519">Submit</button>
</div>

I didn't find any type=submit in this. What should I do here?

1. What locators should I use for the above button? I couldn't find any class selector, So I used the button selector and the data-ember-action attribute. Can I use the text-selector? i.e. page.locator('"Submit"').click();?
2. Facing another issue: After creating the changes, when I try to install locally, this error shows up:

[Talha76]

And what is this error while trying to submit using cpb s {file_name}.cpp? Cannot understand properly what's going on here. (Before running the submit command, I installed it locally)

[Talha76]

@searleser97 I surfed the internet to find the solution for above problems, but couldn't find any? Can you help me out?

[searleser97]

Interesting I wonder if it is due to some upgraded package, I'll check it out, but in the meantime you can test by commenting out the updateNotifier code here: https://github.com/searleser97/cpbooster/blob/a7ac746dab498f222e4d9c6af07f2208e4f9c4ec/app/src/index.ts#L36

Also you can comment out all the related imports :)

btw, thanks for your efforts on this, really appreciate it, I am sure the community will love this addition as well 😁

[Talha76]

And here's another issue. In the submit button inspection, I found the code like this.

<div class="submit-run float-right">
    <button class="ns-button" data-ember-action="519">Submit</button>
</div>

I didn't find any type=submit in this. What should I do here?

1. What locators should I use for the above button? I couldn't find any class selector, So I used the button selector and the `data-ember-action` attribute. Can I use the text-selector? i.e. `page.locator('"Submit"').click();`?

2. Facing another issue: After creating the changes, when I try to install locally, this error shows up:
   ![Screenshot from 2022-07-16 10-23-32](https://user-images.githubusercontent.com/58101262/179339250-2dc185d4-0b3b-47a7-989f-4fadac53d02f.png)

@searleser97 about the locator problem, can you help me out?

[searleser97]

I believe that the parameter of the click function is any css selector so you can pass something like class=submit-run to it and it should work, I don't remember the syntax exactly but it should be something like that

[searleser97]

I believe the following link is a good reference: http://cuketest.com/playwright/docs/selectors/index.html

[searleser97]

btw, I didn't know that now there is something called locator in playwright, not sure if that would be a breaking change, in this project we are using version 1.11 and currently they are in 1.23, I'll check on the possibility to upgrade, but for now I believe just putting the css selector as parameter of the click function should work.

[Talha76]

@searleser97 I found out that, this site is very complex, I understood what actually happens in codeforces or atcoder: The .cpp file contains the url where to be submitted, then at that url, cpbooster finds Browse files or open files and opens the file at that link, then it clicks the submit button. But codechef does not work this way. It has two modes for a problem, old-versoin and new-version. In the new-version page, it looks like this: here, I cannot find any <select> tag for language selector. All I find is the list tags <li>:

That above description was about new-version problem page, at old-version problem page, it looks like below, and there is no open file or browse file button: (At contests, the old-version type is used, they don't give us the new-version page at contests)

Here, for submitting, we need to click that submit button, which takes us to another page containing the open file and submit button:

In this page, we have language-selectors select tag. So, when we clone a codechef contest, the cloned files contain the url of the old-problems page. So, for submitting, we need to click submit button, then at the next page, we need to submit the file or code and then submit finally.

How to handle all of the old problem page?

[Talha76]

And I am really sorry that I couldn't understand before how cpbooster works. I learnt many things from here, which I didn't know before. Please forgive me for this.

[searleser97]

nice understanding, so, playwright is an automation tool that can basically do anything you could do manually in a browser, so basically with playwright we can simulate all the steps you just mentioned. We can tell playwright to first click on the first submit button and then wait for the other page to load, then upload file or read the file and paste the contents in the text area and then click the button, we can tell playwright to do all that, we just have to know what code needs to be written so that it does what we want .

[Talha76]

@searleser97 How can I understand that the code I wrote works properly i.e. it is moving to the pages properly? Or is there any way that I can simulate the code to debug?

[searleser97]

https://github.com/searleser97/cpbooster/blob/a7ac746dab498f222e4d9c6af07f2208e4f9c4ec/app/src/Submit/OnlineJudgeFactory/OnlineJudge.ts#L179

change above line to headless: false

[Talha76]

So, when I try to submit, it shows

codechef alias for cpp was not found in config file

But I added cpp alias for codechef in config.ts:

cpp: {
        template: "",
        command: "g++ -std=gnu++17 -O2",
        debugCommand: "g++ -std=gnu++17 -DDEBUG -Wshadow -Wall",
        aliases: {
          codeforces: "54",
          atcoder: "4003",
          omegaup: "cpp17-gcc",
          szkopul: "C++",
          codechef: "44",
          yandex: "gcc7_3"
        },
        type: "compiled",
        commentString: "//"

So, I guess it is showing error due to not recognizing codechef cpp alias in this line: https://github.com/searleser97/cpbooster/blob/a7ac746dab498f222e4d9c6af07f2208e4f9c4ec/app/src/Submit/OnlineJudgeFactory/OnlineJudge.ts#L207 Because after this line, the output alias not found is shown.

What is going on here? and what should I do here?

[searleser97]

you should have a cpbooster-config.json file according to cpbooster's usage described here https://searleser97.github.io/cpbooster/docs/configuration.

The alias should be defined in that file

[Talha76]

How to click this button?

<a class="button blue right" href="/LRNDSA02/submit-old/CHFQUEUE" data-bindattr-314="314">Submit</a>

I've tried different approaches like, click("a.button.blue.right"), click("a[class=button blue right]"), click("a[class='button blue right']"). Nothing works.

[Talha76]

This <select> tag is hidden, So, this error shows up: (This is the select tag for lanuage)

=========================== logs ===========================
waiting for selector "select"
  selector resolved to hidden <select id="ember397" class="ember-view ember-select emb…>…</select>
  selecting specified option(s)
    element is not visible - waiting...
============================================================

[searleser97]

How to click this button?

<a class="button blue right" href="/LRNDSA02/submit-old/CHFQUEUE" data-bindattr-314="314">Submit</a>

I've tried different approaches like, click("a.button.blue.right"), click("a[class=button blue right]"), click("a[class='button blue right']"). Nothing works.

hum, I don't think I am sure how to select it, sorry for not being able to help further here :(

[searleser97]

This <select> tag is hidden, So, this error shows up: (This is the select tag for lanuage)

=========================== logs ===========================
waiting for selector "select"
  selector resolved to hidden <select id="ember397" class="ember-view ember-select emb…>…</select>
  selecting specified option(s)
    element is not visible - waiting...
============================================================

interesting 🤔, not sure how to solve this 😞

[Talha76]

Codechef has a problem. If I login to same codeforces account from another client, then the before logged in client gets logged out. In this scenario, when I login from the playwright chromium, it gets logged out from firefox. Can it be resolved?